demo D82
Row selection
Single and multiple row selection, visible in the grid and on the row
selection: 'multiple'
The configuration
<script>
import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
import createLatticeAction from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/svelte.esm.min.js';
const lattice = createLatticeAction({ createGrid });
const config = {
rowKey: 'id',
selection: 'multiple',
columns: [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
{ field: 'team', title: 'Team', filter: { type: 'set' } },
{ field: 'owner', title: 'Owner', filter: { type: 'set' } },
{ field: 'tier', title: 'Tier',
cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
{ field: 'state', title: 'State',
cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'active', title: 'Active', type: 'boolean' },
{ field: 'deprecated', title: 'Deprecated', type: 'boolean' },
],
rows, // 20,000 service records
// onGrid hands over the live grid the moment it is created. Select rows
// through the API rather than by clicking.
onGrid: (grid) => {
const keys = [2, 3, 4, 9, 10].map((i) => grid.rows.get(i)?.key).filter(Boolean);
if (keys.length) grid.selection.set(keys);
},
};
</script>
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.min.css">
</svelte:head>
<div use:lattice={config} style="height: 540px"></div>Selecting single and multiple rows for bulk actions
Row selection marks whole rows as chosen, distinct from a cell range or a single active cell, and is the basis for any workflow that acts on a set of records at once: deleting a batch, exporting chosen rows, or applying an edit across everything currently picked. A developer reaches for it wherever the unit of interest is the row rather than an individual value, for example a task list where items are archived once ticked off, or an admin table where accounts are selected before a bulk status change. Lattice Grid controls this with selection: 'multiple' on the grid configuration, which allows click, shift-click range extension and ctrl or cmd-click toggling to build a set of selected rows; setting it to 'single' restricts the grid to one selected row at a time. As a JavaScript data grid, Lattice Grid tracks selection state separately from the row data, so toggling a row does not re-render the rest of the grid, and selecting thousands of rows in a virtualised view costs the same as selecting one, because only the visible row elements carry the selected styling at any moment. Selected rows carry both a visual highlight and an ARIA aria-selected attribute, so the current selection reaches screen readers as well as any code reading selection state back out of the grid.
How do I let users select multiple rows in a data grid?
Set selection: 'multiple' in the grid configuration. Users then click a row to select it, shift-click to extend the selection to a range, and ctrl or cmd-click to add or remove individual rows without losing the existing selection. Use selection: 'single' where only one row should ever be selected at a time.