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.
About the Tree Table component
Tree Table shows hierarchical data with columns, like a file browser: folders open and close with a chevron to show their children, indented with guide lines, and opened rows slide in under their parent. Parents can show the total of their children in a column, such as folder sizes, and rows can be ticked, with a ticked folder selecting everything inside it.
data takes rows with id, name, values for the extra columns and children. columns sets each column's key, label, alignment, width, an optional sum that totals a parent's children and a format function for the cell. Clicking a column header sorts within each level, with folders kept above files. defaultExpanded opens rows at the start, Expand all and Collapse all buttons sit in the toolbar, and selectable with defaultSelected and onSelectionChange handle the tick boxes.
When to use it
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 @reactframe/tree-tableOr 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
npm dependencies
Installed for you by the shadcn CLI.
Tree Table 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.
- Can I use it for data that is not files?
- Yes, but some wording and icons are written for files: the toolbar counts "files", the grid is labelled Files, and rows show folder and file icons. Change those strings and icons in the component for budgets, categories and similar data.
