demo D86
Copy and Paste Between a Data Grid and Excel in React
Copy and paste against Excel and Sheets
clipboard interop
This grid copies and pastes ranges against Excel and Google Sheets, keeping rows and columns intact across the boundary. It lets people move data between the grid and a spreadsheet the way they already do, so the grid feels like one rather than just resembling one.
This is the React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
<div id="grid"></div>
<script type="module">
import React from 'https://esm.sh/react@18';
import { createRoot } from 'https://esm.sh/react-dom@18/client';
import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/react.esm.min.js';
const LatticeGrid = createLatticeGrid({ React, createGrid });
const 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 },
];
const rows = [/* work orders */];
function App() {
// Copy and paste a block of cells the way a spreadsheet does, alongside
// whole-row selection. The clipboard action sits on the rail.
return (
<LatticeGrid
rowKey="id"
selection={{ mode: 'multiple', ranges: true }}
edit
toolPanel={{ side: 'left', panels: ['columns'], actions: ['clipboard', 'export', 'undo', 'redo'], exportName: 'work-orders' }}
columns={columns}
rows={rows}
style={{ height: '540px' }}
/>
);
}
createRoot(document.getElementById('grid')).render(<App />);
</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. See the step-by-step how to copy and paste between a grid and Excel guide for a runnable example and the source.
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.