demo D75
Hierarchy from a path
Rows carrying their own ancestry, missing levels synthesised
tree: { path }
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',
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
// Only the top level and the leaves have rows of their own. The middle
// level is in nobody's data and is synthesised from the paths, so those
// rows render as group rows with no owner and no charge of their own.
tree: { path: (row) => row.hierarchy, label: 'name', title: 'Business unit' },
columns: [
{ field: 'owner', title: 'Owner', filter: { type: 'set' }, layout: { width: 180 } },
{ field: 'headcount', title: 'Headcount', type: 'number', total: 'sum', layout: { width: 140 } },
{ field: 'charge', title: 'Monthly charge', type: 'number', format: { style: 'currency', currency: 'GBP', decimals: 0 }, total: 'sum', layout: { width: 180 } },
],
rows, // rows carrying their own ancestry as a hierarchy array
});
</script>Building a tree from a path field in a JavaScript data grid
A path field is a single string on each row, such as "Region/UK/London", that already encodes where the row sits in a hierarchy without a separate parent-id column. Reach for this when a data source hands back flat records that carry their own ancestry in one column rather than a normalised tree, which is common in file listings, category taxonomies and org charts exported from another system. The tree: { path } option tells Lattice Grid which field to read and which delimiter splits it into levels, and the grid walks each row’s path to place it under the correct ancestor.
Levels named in a path but absent as their own row are synthesised: if no row exists for "Region/UK", the grid creates a group row to hold the London and Manchester rows beneath it, so the tree stays contiguous even when the source data only lists leaves. Synthesised group rows carry aria-expanded and aria-level like any other tree row, so keyboard navigation and screen readers treat a generated ancestor the same as one that came from the data. Because the tree is derived once from the path field rather than requiring a pre-built nested structure, reshaping the source rows is enough to reshape the grid; there is no separate tree object to keep in sync by hand.
How do you build a tree grid from a flat list with a path column?
Set tree: { path: 'fieldName' } on the grid configuration, naming the column that holds each row’s full ancestry as a delimited string. Lattice Grid splits every row’s path into levels, groups rows that share a prefix under the same ancestor, and creates a group row for any intermediate level that has no matching record of its own.