demo D86
Clipboard
Copy and paste against Excel and Sheets
clipboard interop
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
selection: { mode: 'multiple', ranges: true },
edit: true,
toolPanel: { side: 'left', panels: ['columns'], actions: ['clipboard', 'export', 'undo', 'redo'], exportName: 'work-orders' },
columns: [
{ field: 'id', title: 'Order', layout: { width: 120, pin: 'start' } },
{ field: 'reference', title: 'Reference', layout: { width: 130 } },
{ field: 'team', title: 'Team', filter: { type: 'set' }, edit: true },
{ field: 'stage', title: 'Stage', filter: { type: 'set' }, edit: true },
{ field: 'due', title: 'Due', type: 'date', layout: { width: 140 }, edit: true },
{ field: 'circuits', title: 'Circuits', type: 'number', layout: { width: 110 }, edit: true },
{ field: 'budget', title: 'Budget', type: 'number', layout: { width: 140 },
format: { style: 'currency', currency: 'GBP' }, total: 'sum', edit: true },
],
rows, // work orders
});
</script>Copying and pasting a range against Excel and Sheets
Clipboard interop decides whether a JavaScript data grid feels like a spreadsheet or merely looks like one. A developer reaches for it as soon as users move data between the grid and Excel or Google Sheets: selecting a range, copying it, and having the paste land as tab-separated columns and newline-separated rows, in the order the source application wrote them, rather than as one opaque string. Lattice Grid’s clipboard interop reads and writes that tab-separated form directly, so a copied range pastes into Sheets as real columns, and a range copied from Excel pastes into the grid cell by cell, run through each destination column’s parser and validation before the write commits.
Paste targets a range the same shape as the copied block, starting from the active cell, clipped at the edge of the data if the destination is smaller than the source. A value that fails a column’s validation is rejected on its own, so one bad cell does not roll back the rest of the paste. The interaction runs through the same edit pipeline as typing into a cell, so a paste is one entry on the undo stack regardless of how many cells it touched, and a screen reader announces the count of cells changed once, at the end.
Does copy and paste work between Lattice Grid and Excel?
Yes. Copying a range writes tab-separated values to the system clipboard, the form Excel and Google Sheets both read as columns and rows. Pasting reads the same format back, splitting on tabs and newlines and writing each value through the destination column’s type and validation.