Skip to content

useTableTreeData

@astryxdesign/core v0.7.1 · useTableTreeData

配置对象是 MaybeRefOrGetter:传一个 getter,行的层级信息、全展开状态和切换动作才能保持实时。

参数 ​

参数类型默认值说明
getRowMeta(item: T) => TableTreeRowMeta | undefined—某一可见行的结构信息:{ id, level(从 0 开始), hasChildren, isExpanded }。不属于树的行返回 undefined。
onToggleItem(item: T) => void—切换这一行的展开状态。
hasExpandableRowsboolean—数据里有没有可展开的行。为 false 时插件什么都不做:没有箭头,没有缩进,也没有树的 ARIA 属性。
hasExpandAllControlbooleanfalse在树列的表头放一个全部展开/全部收起的开关。要配合 isAllExpanded 和 onExpandAll / onCollapseAll 一起用。
isAllExpandedboolean | 'indeterminate'—所有可展开行的整体展开状态,驱动表头那个开关。全展开是 true,全收起是 false,只有一部分展开是 'indeterminate'。
onExpandAll() => void—展开所有可展开的行。表头的开关会调它。
onCollapseAll() => void—收起所有行。表头的开关会调它。
indent'sm' | 'md' | 'lg''md'每层的缩进档位,对应 spacing-3 / spacing-4 / spacing-6 三个 token。
treeColumnKeystring插件之外的第一列承载缩进和展开箭头的列。给的键找不到时,用第一个不是插件加进来的列。
hasRowClickExpansionbooleanfalse为 true 时,点可展开行的任意位置都能展开或收起,不只是点箭头。这是方便鼠标用户的额外操作:键盘和读屏用户仍然用箭头按钮。点到单元格里的交互内容(按钮、链接、表单控件)或者正在选中文字时不会切换。叶子行没有反应,数据本来就拍平时这个参数也没作用。

返回值 ​

字段类型说明
transformColumns(columns: TableColumn<T>[]) => TableColumn<T>[]把树列原来的单元格渲染包一层,画出层级缩进、箭头和内容。hasExpandableRows 为 false 或者找不到树列时,原样返回。
headerPatch(column: TableColumn<T>) => TableHeaderPatch | null把全部展开 / 全部收起的按钮放到树列表头文字前面。其它列、没开 hasExpandAllControl、或者三个全展开字段没给齐时,返回 null。
rowPatch(row: T, index: number, columnCount: number) => TableRowPatch | null写出 aria-level(层级 + 1),有子行的还写 aria-expanded。开了 hasRowClickExpansion 时,还会给可展开行加上点击切换和 astryx-table__clickable 类。