Svelte Tree Grid
Hierarchical data is usually already in your rows: every record carries the id of its parent. Give SvGrid that field name and it builds the tree for you, indenting children under parents and putting an expander in the column you nominate. There is no separate tree component and no second data shape to maintain.
Everything the flat grid does keeps working. Sorting sorts within a level, filtering keeps the ancestors of a match visible, and children can be fetched on expand instead of loaded up front.
Install
npm i @svgrid/gridFree and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.
The code
<script lang="ts">
import { SvGrid } from '@svgrid/grid'
const people = [
{ id: 1, managerId: null, name: 'Ada Lovelace', title: 'CTO' },
{ id: 2, managerId: 1, name: 'Grace Hopper', title: 'VP Engineering' },
{ id: 3, managerId: 2, name: 'Alan Turing', title: 'Staff Engineer' },
]
</script>
<SvGrid
data={people}
{columns}
treeData={{ parentField: 'managerId', column: 'name' }}
/>What you get
- One prop, from a parent id - treeData={{ parentField: 'managerId', column: 'name' }} is the whole setup. idField defaults to id and indentPx to 12.
- Lazy children - Load a node's children the first time it expands, so a deep hierarchy costs one small request per opened branch instead of a full download.
- Cascading checkboxes - Tick a parent and its subtree follows, with a tri-state indeterminate box when only some children are selected.
- Server-side trees - For hierarchies too large to hold in memory, the server tree row model asks your endpoint for one level at a time.
- Master-detail as well - When the children are a different shape from the parent, an expandable detail panel per row is often the better fit, and is built in.
- Free and MIT - Tree data, lazy expansion and master-detail are all in @svgrid/grid with no license key.
Live examples
- Tree data (hierarchy) - treeData nests rows by parent id into an expandable hierarchy. Tree rows stay real data rows - own cells, formatting, editing - and just gain an expander plus indent. Takes flat parent-id data directly, or nested children arrays via flattenTreeData. Full treegrid a11y with arrow-key expand.
- Tree + master/detail - Hierarchical file-system rows and an order/line-item master-detail view.
- Org chart tree - 5-level employee hierarchy with role pills, department, headcount roll-up. Expand/collapse, expand-all/collapse-all.
- Lazy tree (load on expand) - Region → Country → State → City. Children fetched async on first expand with a "Loading…" placeholder row; subtrees cached on second expand.
- Tree checkbox cascade - Permissions matrix as a tree: workspaces → resources → actions. Checking a parent checks descendants; partial state on parents. Live cost rollup.
- Bill of Materials - Bicycle BOM, 4 levels deep. Edit any leaf part's qty or unit cost; subtotals roll up through the assembly chain to the grand total.
Documentation
- Tree data - Nest rows into an expandable hierarchy with the treeData prop.
- Tree rows (expand / collapse) - SvGrid does not have a treeData prop. Tree-shaped data renders through the same data + columns pipeline as any other grid, with the tree behaviour living in…
- Server tree data (load on demand) - When a hierarchy is too large to ship up front - a file system, an org chart with tens of thousands of people, a geographic drill-down - you do not want to…
Related articles
- Displaying Tree Data and Hierarchies in SvGrid - Render parent-child hierarchies - org charts, file trees, category taxonomies - in SvGrid with expandable rows, size rollups, and lazy child loading.
- Inside SvGrid: Grouping, Trees, and Master-Detail - Three different ways to show hierarchy in a data grid, unified under one expansion model in SvGrid - the design decision and how each feature actually works.
Frequently asked questions
How do I show hierarchical data in a Svelte table?
Keep the flat array and add the treeData prop naming the field that holds each row's parent id, plus the column that should carry the expander. The grid nests and indents the rows for you.
Do I need nested arrays?
No. The common case is a flat list with a parent id, which is what treeData expects. Nested source data can be flattened once with a synthetic parent field, as the demo does.
Can children load on demand?
Yes. Fetch a node's children when it first expands, or use the server tree row model to page an entire hierarchy one level at a time.
Is the tree grid free?
Yes. Tree data, expansion, cascading selection and master-detail rows are MIT-licensed in @svgrid/grid.