Skip to content

useTableTreeState

@astryxdesign/core v0.7.1 · useTableTreeState

data 是 MaybeRefOrGetter:树会变的时候,传 getter 或 ref。其它字段从你传入的配置对象上读。

参数 ​

参数类型默认值说明
dataMaybeRefOrGetter<readonly T[]>—嵌套数据:行可以在 childrenKey 指向的属性下带子行。完全是拍平数据(哪都没有子行)时插件什么都不做,所以可以先用着,等数据变成层级结构再说。
idKey(keyof T & string) | ((item: T) => string | number)—行 ID 的取法:写属性名,或者给一个返回唯一 id 的函数。
childrenKeystring'children'存放子行数组的属性名。
defaultExpandedIdsIterable<string>—不受控模式下初始的展开行 id,只在初始化时读一次。传了 expandedIds 就忽略它。
expandedIdsReadonlySet<string>—受控的展开行 id 集合,配合 onExpandedIdsChange 使用。
onExpandedIdsChange(ids: ReadonlySet<string>) => void—展开状态一变化就带着下一个集合调到(两种模式都调)。懒加载场景就在这里去拉子行。
isItemExpandable(item: T) => boolean有子行才算这一行要不要显示展开箭头。默认只看子行为不为空,这个函数可以盖掉默认判断;懒加载时用得上,子行还没拉回来也能算可展开。
sortSiblings(siblings: T[]) => T[]—拍平时给每一组同级行单独排序;子行始终紧跟在父行下面。用来把列的排序和树的顺序合起来。
indent'sm' | 'md' | 'lg''md'每层的缩进档位(spacing-3 / spacing-4 / spacing-6),会传给 useTableTreeData。
treeColumnKeystring插件之外的第一列承载缩进和展开箭头的列,会传给 useTableTreeData。
hasExpandAllControlbooleanfalse在树列表头放全部展开/全部收起的开关。
hasRowClickExpansionbooleanfalse点可展开行的任意位置就切换展开,会传给 useTableTreeData。

返回值 ​

字段类型说明
visibleDataComputedRef<T[]>要渲染的行:父行在前,展开的父行后面紧跟子行。作为 data 传给表格。
pluginTablePlugin<T>树插件,已经和可见行、展开集合接好了。塞进 plugins 的任意一个键就行。
expandedIdsComputedRef<ReadonlySet<string>>当前在用的展开集合:受控时是你给的那个,否则是内部维护的。
isAllExpandedComputedRef<boolean | 'indeterminate'>所有可展开行汇总出来的展开状态。
expandAll() => void展开所有可展开的行,并把新集合通过 onExpandedIdsChange 报出去。
collapseAll() => void收起所有行,并把空集合通过 onExpandedIdsChange 报出去。