Org charts, file systems, BOMs, ledger structures—real-world data is rarely flat. Tree-data tables let users expand and collapse rows in place to drill down without losing context.
This tutorial covers tree-data patterns in Svelte / SvelteKit: parent/child rendering, lazy loading children, and expand-all / collapse-all controls. We compare svelte-headless-table, SVAR DataGrid, Flowbite, and Simple Table for Svelte.
Note: most Svelte data grids don't ship hierarchical data natively. Simple Table for Svelte uses the same SimpleTable component for flat and hierarchical data.
Why it matters
Drill-down without losing context
Users see parent and children in the same surface; no modal or detail-page round-trips.
Compact wide hierarchies
Collapse low-level children; expand specific branches users care about.
Reusable for many domains
Folders, regions, org charts, and chart-of-accounts all share the pattern.
Combinable with sort/filter
Filter the leaves; the right ancestors stay visible to preserve context.
Svelte library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Svelte | Built-in (source-available) | Hierarchical rows with built-in expand/collapse and chevron renderer. |
| svelte-headless-table | Plugin (manual) | addExpandedRows; rendering and indent are DIY. |
| SVAR DataGrid (Svelte) | Built-in (commercial) | Tree built-in but commercial license required. |
| Flowbite Svelte Table | Manual | Markup-only—pre-flatten and render hierarchy yourself. |
Implementation: Simple Table for Svelte
Provide hierarchical rows with depth per the docs. Simple Table renders chevrons and handles expand/collapse state for you.
Common pitfalls
Performance on deep trees
Problem: Expanding a node with 10k descendants stalls the UI.
Solution: Lazy-load children on expand, and rely on built-in virtualization.
Filtering hides ancestors
Problem: Searching matches a leaf, but the tree breaks because parents are filtered out.
Solution: Filter while preserving ancestor rows. Simple Table supports this with includeAncestors filter mode.
Expanded state lost on refresh
Problem: Polling refresh closes every expanded branch.
Solution: Hold isExpanded by stable rowId in $state and reapply after refetch.
Indent ambiguity
Problem: Multiple columns indent independently; users can't tell where children belong.
Solution: Indent only the tree column (usually the first). Simple Table does this automatically with expandable: true.
Frequently asked questions
- Does Simple Table for Svelte have a separate TreeTable?
- No—the same SimpleTable component handles flat and hierarchical data. Provide depth and expansion information per the nested tables docs to render a tree.
- Does this work with Svelte 4 stores?
- Yes. Replace $state with writable() and the same patterns work.
- Can I use tree data with column pinning and grouping?
- Yes. Tree data, pinning, virtualization, sorting, and filtering all combine in the same component.
Wrap-up
Tree data in Svelte is straightforward with Simple Table—provide hierarchy on each row and Simple Table handles the rest. svelte-headless-table requires plugin wiring; SVAR ships it commercially; Flowbite is DIY.
If you need hierarchical data alongside virtualization and pinning, Simple Table for Svelte is the focused source-available pick.