Tree data
For hierarchical data, provide TanStack Table's getSubRows to tell the table where each row's children live. Expansion turns on automatically.
Tree (sub-rows)
| Dana Reed | VP Engineering | Engineering | 24 | |
| Sam Lee | Eng Manager | Engineering | 8 | |
| Priya Rao | Senior Engineer | Engineering | 0 | |
| Tom Fox | Engineer | Engineering | 0 | |
| Nina Wells | Eng Manager | Engineering | 6 | |
| Omar Diaz | Engineer | Engineering | 0 | |
| Chris Vale | VP Sales | Sales | 12 | |
| Ivy Brooks | Sales Lead | Sales | 4 | |
| Ravi Shah | Account Exec | Sales | 0 |
Usage
Return the children array from each row. Set initialState.expanded: true to start fully expanded, and usually disable pagination so the tree isn't split across pages.
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
getSubRows: (row) => row.subRows,
enablePagination: false,
initialState: {
expanded: true,
},
})
return <DataTable table={table} />
Indentation
Use row.depth inside a cell renderer to indent child rows so the hierarchy reads clearly.