Tree data
For hierarchical data, provide TanStack Table's getSubRows to tell the table where each row's children live. Expansion turns on automatically.
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.
From a flat list
APIs often return trees as a flat list with parent ids. Build subRows once with useMemo and pass getSubRows as usual.
Loading children on expand
Let rows expand before their children exist with TanStack's getRowCanExpand, and load the children when the row expands (control expanded and watch it in onExpandedChange).
Editing tree rows
Editing works at any depth: onEditingRowSave gets the row, and you update the matching node in your nested data.
Expand-all toggle
The expand column's header toggles every row. Hide it with enableExpandAll: false.