Usage
State management companion for useTableTreeData. Owns the expanded set (controlled or uncontrolled) and flattens nested data into the visible row array; collapsed subtrees are unmounted, not hidden, so the table body contains exactly the visible rows. Returns expandAll/collapseAll helpers, the aggregate isAllExpanded state (true/false/indeterminate) for a header expand-all control, and a ready-to-use config for the tree plugin. Note: because collapsed rows unmount, cell-local React state inside collapsed subtrees is lost on collapse; lift state that must survive.
ts
Parameters
| Param | Type | Description |
|---|---|---|
datarequired | T[] | Nested data: rows may carry child rows under childrenKey. Flat data (no children anywhere) makes the plugin a no-op, so it can be adopted before the data becomes hierarchical. |
idKeyrequired | (keyof T & string) | ((item: T) => string | number) | Row ID accessor: property name or function returning a unique id. |
childrenKey | string (default: 'children') | Property holding each row's children array. |
defaultExpandedIds | Iterable<string> | Initial expanded row ids for uncontrolled mode. Ignored when expandedIds is provided. |
expandedIds | ReadonlySet<string> | Controlled set of expanded row ids. Pair with onExpandedIdsChange. |
onExpandedIdsChange | (ids: ReadonlySet<string>) => void | Called with the next expanded set whenever expansion changes (both modes). In lazy-loading setups, trigger the children fetch here. |
isItemExpandable | (item: T) => boolean | Should this row show an expander? Overrides the default non-empty-children check; use for lazy loading, where a row is expandable before its children have been fetched. |
sortSiblings | (siblings: T[]) => T[] | Sort each sibling group independently during flattening; children always stay directly under their parent. Pass applySort from useTableSortableState to compose with column sorting. |
indent | 'sm' | 'md' | 'lg' (default: 'md') | Indent step per level (spacing-3 / spacing-4 / spacing-6), forwarded to useTableTreeData. |
treeColumnKey | string | Column that carries the indent + expander, forwarded to useTableTreeData. Defaults to the first column. |
Examples
Common configurations, variations, and states.A file-tree table built from nested data. useTableTreeState flattens the tree into the visible rows and owns the expanded set; useTableTreeData draws the per-level indent and the expand/collapse chevron in the tree column. The two hooks are designed to work together, so this one example covers both. hasExpandAllControl adds the expand-all/collapse-all toggle to the tree column header. Collapsed branches are unmounted, not hidden.