demo D84
Cell ranges
Dragging a block, ctrl-clicking a second, and a summary of it
selection.setRange()
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 },
columns: [
{ field: 'id', title: 'Order', layout: { width: 120, pin: 'start' } },
{ field: 'reference', title: 'Reference', layout: { width: 130 } },
{ field: 'team', title: 'Team', filter: { type: 'set' } },
{ field: 'due', title: 'Due', type: 'date', layout: { width: 140 } },
{ field: 'circuits', title: 'Circuits', type: 'number', layout: { width: 110 } },
{ field: 'impact', title: 'Impact', type: 'number', layout: { width: 100 } },
{ field: 'effort', title: 'Effort', type: 'number', layout: { width: 100 } },
{ field: 'budget', title: 'Budget', type: 'number', layout: { width: 140 },
format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
],
rows, // work orders
});
</script>Selecting a rectangular block of cells for copy, fill or bulk edit
A cell range is a rectangular block of cells picked out by dragging across rows and columns, or by ctrl-clicking a second block onto the first, independent of which rows happen to be selected. A developer reaches for it wherever an action needs to target an arbitrary region rather than whole rows: copying three columns from twelve rows into a spreadsheet, clearing a block before a bulk edit, or reading a running total for the cells currently under the pointer. Lattice Grid exposes the mechanism through selection.setRange(), which sets the active range programmatically and keeps it in sync with whatever the user has dragged or ctrl-clicked, so a toolbar button and a mouse gesture end up manipulating the same state. Once a range exists, Lattice Grid computes a live summary for it, footer-style, without re-deriving the grid’s row model: only the cells inside the bounds are read, so the cost of the summary tracks the size of the selection rather than the size of the dataset. As a JavaScript data grid intended for keyboard-first workflows, range selection also extends by shift-arrow and shift-click alongside the pointer gestures, and the resulting rectangle is what the clipboard and fill-handle features operate on, so a range selected once feeds directly into copy, paste and fill without a separate step to redefine it.
How do I select a rectangular block of cells in a data grid?
Drag from one cell to another to mark a rectangular range, or hold ctrl and click a second block to add it to the selection. Lattice Grid tracks the resulting bounds through selection.setRange(), which can also be called directly to set a range from code, and the same range is what copy, fill and bulk-edit actions then operate on.