demo D83
Checkboxes and select-all
A pinned checkbox column with a tri-state header
selection: { checkbox, headerCheckbox }
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', checkbox: true, headerCheckbox: true },
toolPanel: { side: 'left', panels: ['filters', 'columns'], actions: ['restore'], exportName: 'lattice-demo' },
columns: [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 140 }, filter: true },
{ field: 'team', title: 'Team', filter: true },
{ field: 'owner', title: 'Owner', filter: true },
{ field: 'tier', title: 'Tier', filter: true,
cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
{ field: 'state', title: 'State', filter: true,
cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
{ field: 'region', title: 'Region', filter: true },
{ field: 'active', title: 'Active', type: 'boolean', filter: true },
{ field: 'deprecated', title: 'Deprecated', type: 'boolean', filter: true },
],
rows, // 20,000 service records
});
</script>A pinned checkbox column with a tri-state header
Checkbox selection is the pattern users expect once a grid supports bulk actions: tick individual rows, or use a header checkbox to select every row currently loaded. Lattice Grid provides this through the selection: { checkbox, headerCheckbox } option, which adds a frozen leading column of row checkboxes and a header checkbox that reflects the current state as checked, unchecked, or indeterminate when only some rows are selected. A developer reaches for this when the next step is a bulk delete, export, or status change, and the selected set needs to survive scrolling rather than being lost as rows are recycled off screen.
Because the checkbox column is pinned, it stays in view during horizontal scroll on wide tables, so a user working through a long row of columns never loses track of which records are ticked. The tri-state header stays in sync with the underlying selection model rather than the rows currently rendered in the DOM, which matters in a JavaScript data grid using virtual scrolling: a row scrolled out of view is still counted as selected, so the header checkbox does not flicker to “unchecked” while its row is temporarily unmounted. Selection state is read from the model, not from checkbox DOM nodes, keeping toggling fast at row counts in the hundreds of thousands.
How do I add a select-all checkbox to a JavaScript grid header?
Set selection.headerCheckbox alongside selection.checkbox in the grid configuration. Lattice Grid renders the header control automatically and keeps it in a tri-state: unchecked when nothing is selected, checked when every row is, and indeterminate for a partial selection, updating as individual row checkboxes are toggled or cleared.