demo D74
Tree data
A hierarchy from a parent reference
tree: { parentKey: 'parentId' }
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',
grandTotalRow: 'bottom',
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
// Every node is a real row naming its parent. The grid generates the tree
// column: the expander, the indent and the name all come from `label`, so
// `name` is deliberately not declared as a column of its own below.
tree: { parentKey: 'parentId', label: 'name', title: 'Estate' },
columns: [
{ field: 'kind', title: 'Level', filter: { type: 'set' }, layout: { width: 120 } },
{
field: 'status', title: 'Status', filter: { type: 'set' }, layout: { width: 140 },
cell: { decoration: 'pill', variant: { map: { live: 'success', provisioning: 'info', ceased: 'neutral' } } },
},
{ field: 'devices', title: 'Devices', type: 'number', total: 'sum', layout: { width: 120 } },
{ field: 'charge', title: 'Monthly charge', type: 'number', format: { style: 'currency', currency: 'GBP', decimals: 0 }, total: 'sum', layout: { width: 180 } },
],
rows, // estate nodes, each naming its parent
});
</script>Building a row hierarchy from a parent reference
Tree data turns a flat list of rows into nested groups by following a parent-child relationship already present in the source: an org chart where each person carries a manager id, a bill of materials where each part points at its assembly, a category tree where each node points at its parent. A developer reaches for this when the hierarchy is implicit in the data rather than expressed as a path string or pre-nested objects, and reconstructing it by hand would mean a separate grouping step to write and maintain. Lattice Grid builds the tree from tree: { parentKey: 'parentId' }, reading the named field off each row to place it, then expanding branches lazily as they are opened rather than materialising the whole tree up front. Because this is a JavaScript data grid built around incremental updates, adding, removing or re-parenting a row only touches the affected branch: the rest of the tree keeps its expand state and scroll position instead of rebuilding from scratch. Expand and collapse controls are reachable by keyboard, each toggle exposing its state through aria-expanded so a screen reader announces a branch opening the same way a sighted user sees it. Rows with no valid parent, or ids that never resolve, still render rather than silently vanishing from the grid.
How do I build a tree from a flat array with a parent id in a JavaScript data grid?
Set tree: { parentKey: 'parentId' } on the grid configuration, naming the field on each row that holds its parent’s id. Lattice Grid uses that reference to nest rows under their parent, builds branches as they are expanded rather than all at once, and keeps rows with a missing or unresolved parent visible instead of dropping them from the grid.