Lineage tree
Every number opens down to the entry behind it.
Use it when
- A figure or model is built from others, and people need to trace it to its source.
- The nesting runs deep. Each level indents 12px, so six levels still fit a panel.
Don’t use it when
- The items are a flat list with columns to sort. Use Data table.
- The items are events over time, such as runs. Use Run log row.
The rule it follows
Every number opens down to the entry behind it.
Check: Click any figure. It opens the entries it was built from.
Before and after
The same figures, in a Data table
A double rule under a total means its lines add up. The table checks this itself, and draws the rule only when they do.
| H1 operating profit | Yen |
|---|---|
| Budget | 2,547,970,754 |
| Exchange rates: subsidiary profits worth fewer yen | −41,415,809 |
| Exchange rates: KJP margin on intercompany sales | −275,333,022 |
| Great Lakes Duplicating Supply reserve (US) | −112,654,251 |
| Seventh-floor vacancy (real estate) | −37,800,000 |
| Personnel costs (hiring freeze) | 417,533,766 |
| Gross profit at constant rates and other | −305,523,245 |
| Actual | 2,192,778,193 adds up |
Install
pnpm dlx shadcn@latest add https://tabularui.com/r/lineage-tree.jsonUsage
import { LineageTree } from '@/components/tabular-ui/components/product/LineageTree'; <LineageTree nodes={nodes} selectedId={selected} onSelect={(n) => setSelected(n.id)} />