Tree Table React component
A table whose rows nest, like files in folders: open and close branches with a chevron, parents add up their children (folder sizes), sort any column with folders kept on top, and tick rows with checkboxes that select whole branches.
When to use the Tree Table component
Use Tree Table for data that is both hierarchical and has columns: file browsers, budgets by department, nested categories with counts, bills of materials. Parents can total their children, so people see sums at every level.
For hierarchy without columns, Tree View is lighter; for flat data, use a regular Data Table.
Installation
Add the Tree Table component to your project with the shadcn CLI. It lands in components/tree-table.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/tree-table.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<TreeTable /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| data | { id: string; name: string; values?: Record<string, string | number>; children?: TreeRow[] }[] | DEFAULT_DATA |
| columns | TreeColumn[] | DEFAULT_COLUMNS |
| nameLabel Label of the first (tree) column. | string | "Name" |
| defaultExpanded | string[] | ["src", "components"] |
| selectable | boolean | true |
| defaultSelected Ids of selected leaf rows. | string[] | [] |
| onSelectionChange | (ids: string[]) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- data{ id: string; name: string; values?: Record<string, string | number>; children?: TreeRow[] }[]Default: DEFAULT_DATA
- columnsTreeColumn[]Default: DEFAULT_COLUMNS
- nameLabel
Label of the first (tree) column.
stringDefault: "Name" - defaultExpandedstring[]Default: ["src", "components"]
- selectablebooleanDefault: true
- defaultSelected
Ids of selected leaf rows.
string[]Default: [] - onSelectionChange(ids: string[]) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- How do parent totals work?
- Set sum on a numeric column and every parent shows the sum of its children for it, recursively, like folder sizes.
- What does ticking a folder do?
- It selects every file inside it. Folders show a dash when only some of their files are selected, and onSelectionChange receives the selected leaf ids.
- How does sorting behave in a tree?
- Rows are sorted within each level, and folders always stay above files, so the structure never breaks apart.
