useTableTreeData
@astryxdesign/core v0.7.1 · useTableTreeData
配置对象是 MaybeRefOrGetter:传一个 getter,行的层级信息、全展开状态和切换动作才能保持实时。
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
getRowMeta | (item: T) => TableTreeRowMeta | undefined | — | 某一可见行的结构信息:{ id, level(从 0 开始), hasChildren, isExpanded }。不属于树的行返回 undefined。 |
onToggleItem | (item: T) => void | — | 切换这一行的展开状态。 |
hasExpandableRows | boolean | — | 数据里有没有可展开的行。为 false 时插件什么都不做:没有箭头,没有缩进,也没有树的 ARIA 属性。 |
hasExpandAllControl | boolean | false | 在树列的表头放一个全部展开/全部收起的开关。要配合 isAllExpanded 和 onExpandAll / onCollapseAll 一起用。 |
isAllExpanded | boolean | 'indeterminate' | — | 所有可展开行的整体展开状态,驱动表头那个开关。全展开是 true,全收起是 false,只有一部分展开是 'indeterminate'。 |
onExpandAll | () => void | — | 展开所有可展开的行。表头的开关会调它。 |
onCollapseAll | () => void | — | 收起所有行。表头的开关会调它。 |
indent | 'sm' | 'md' | 'lg' | 'md' | 每层的缩进档位,对应 spacing-3 / spacing-4 / spacing-6 三个 token。 |
treeColumnKey | string | 插件之外的第一列 | 承载缩进和展开箭头的列。给的键找不到时,用第一个不是插件加进来的列。 |
hasRowClickExpansion | boolean | false | 为 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 类。 |