demo D64
Grouping
One level, then several, surviving sort, filter and reload
columns.group(['region'])
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: 'multiple',
// New in 1.4 and only visible under grouping: the cost heading names its
// own reduction rather than just the column.
showTotalInHeader: true,
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
columns: [
{ field: 'account', title: 'Account', filter: { type: 'set' }, group: { enabled: true, index: 0 } },
{ field: 'service', title: 'Service', filter: { type: 'set' }, group: { enabled: true, index: 1 } },
{ field: 'resource', title: 'Resource', layout: { flex: 1, min: 200, max: 320 } },
{ field: 'environment', title: 'Env', filter: { type: 'set' },
cell: { decoration: 'pill', variant: { map: {
prod: 'danger', 'prod-2': 'danger', 'definitely-prod': 'danger',
staging: 'warning', untagged: 'warning', test: 'info',
dev: 'success', 'not-prod': 'neutral',
} } } },
{ field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
],
rows, // cloud cost rows, one object per resource
});
</script>Grouping rows by column value in a JavaScript data grid
Row grouping collapses a flat table into a hierarchy: pick one or more columns and every distinct value in the first becomes a collapsible band containing the rows that share it, with a second column nesting a further level inside each band. A developer reaches for this whenever a dataset reads better organised by category than sorted alphabetically, such as orders grouped by region then by sales rep, or log entries grouped by service then by severity. This demo builds that hierarchy through columns.group(['region']), an ordered array of field names that regroups the current row set to match; a longer array adds levels, an empty array flattens the grid back to its original rows. The grouping survives everything else done to the data afterwards: sorting re-sorts rows within each group rather than breaking the hierarchy apart, filtering removes rows from their groups without collapsing empty ones unexpectedly, and a reload rebuilds the same group structure rather than resetting it. Group bands render as their own row type with aria-expanded reflecting collapsed state, so a screen reader announces whether a band is open before reading into its members. Collapsing a group detaches its rows from the render list rather than hiding them with CSS, keeping scroll height tied to what is actually visible.
How do you group rows by column in a JavaScript data grid?
Call columns.group() with an array of field names in the order you want the hierarchy nested, for example columns.group(['region', 'rep']) for region then sales rep within each region. The grid rebuilds its row structure around those values immediately, and calling columns.group([]) removes the grouping and returns to the flat row list.