demo D153
Moving rows between grids
Drag a row out of one grid and into another
rowTransfer: { group }
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 style="display: flex; gap: 12px; height: 460px">
<div id="catalogue" style="flex: 1; min-width: 0"></div>
<div id="basket" style="flex: 1; min-width: 0"></div>
</div>
<script>
const columns = [
{ field: 'circuit', title: 'Circuit', layout: { width: 190 } },
{ field: 'region', title: 'Region' },
{ field: 'status', title: 'Status', filter: { type: 'set' } },
];
// The catalogue sends rows and reorders its own; group ties the two grids
// together so a row can be dragged from one into the other.
const catalogue = LatticeGrid.createGrid(document.getElementById('catalogue'), {
rowKey: 'id', columns, rows, // the available circuits
rowReorder: true,
rowTransfer: { receive: false, group: 'circuits' },
});
// The basket starts empty and only receives.
const basket = LatticeGrid.createGrid(document.getElementById('basket'), {
rowKey: 'id', columns, rows: [],
rowTransfer: { send: false, group: 'circuits' },
});
</script>Dragging rows between two grids
Row transfer moves a row out of one grid and into another by dragging it across, the way a catalogue row is dragged into a basket. A developer reaches for this whenever a task is about moving records between two lists: building an order from a product catalogue, assigning people from a pool into teams, filing items from an inbox into folders. Lattice Grid links the grids with rowTransfer: { group }, giving both grids the same group name so a row picked up in one is accepted by the other; the source grid emits the removed row and the target grid emits the received one, so both data models stay in step. As a JavaScript data grid, each grid virtualises its own body independently, so a catalogue of many thousands of rows and a short basket both stay responsive during the drag, and only the dragged row element travels between them. The drag target shows a clear insertion point, and the transfer is available from the keyboard through cut and paste between the two grids, so the workflow does not depend on a pointer and reaches keyboard and screen reader users.
How do I drag rows from one data grid into another?
Give both grids the same rowTransfer: { group } name. A row dragged out of one grid is then accepted by the other; the source grid emits the removed row and the target emits the received row, keeping both data models in sync. The same transfer works from the keyboard through cut and paste between the two grids.