Skip to content

useTableTreeState

@astryxdesign/core v0.7.1 · useTableTreeState

data is a MaybeRefOrGetter; pass a getter or a ref when the tree can change. The other fields are read from the config object you pass.

Parameters ​

NameTypeDefaultDescription
dataMaybeRefOrGetter<readonly 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.
idKey(keyof T & string) | ((item: T) => string | number)—Row ID accessor: property name or function returning a unique id.
childrenKeystring'children'Property holding each row's children array.
defaultExpandedIdsIterable<string>—Initial expanded row ids for uncontrolled mode, read once at setup. Ignored when expandedIds is provided.
expandedIdsReadonlySet<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) => booleannon-empty childrenShould 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. Use it to compose column sorting with the tree order.
indent'sm' | 'md' | 'lg''md'Indent step per level (spacing-3 / spacing-4 / spacing-6), forwarded to useTableTreeData.
treeColumnKeystringthe first column no plugin addedColumn that carries the indent + expander, forwarded to useTableTreeData.
hasExpandAllControlbooleanfalseShow the expand-all/collapse-all toggle in the tree column header.
hasRowClickExpansionbooleanfalseLet a click anywhere on an expandable row toggle it, forwarded to useTableTreeData.

Returns ​

FieldTypeDescription
visibleDataComputedRef<T[]>The rows to render, parents followed by the children of expanded rows. Pass it as data to the table.
pluginTablePlugin<T>The tree plugin, already wired to the visible rows and the expanded set. Put it under any key of the plugins prop.
expandedIdsComputedRef<ReadonlySet<string>>The expanded set in use: your controlled value, or the internal one.
isAllExpandedComputedRef<boolean | 'indeterminate'>Aggregate expansion state over every expandable row.
expandAll() => voidExpands every expandable row and reports the new set through onExpandedIdsChange.
collapseAll() => voidCollapses every row and reports the empty set through onExpandedIdsChange.