useTableGroupedRows
@astryxdesign/core v0.7.1 · useTableGroupedRows
参数
useTableGroupedRows() 只有一个配置对象。用 getter 或 ref 包一层,分组才能跟着当前的行和当前的折叠集合走:useTableGroupedRows(() => ({ ... }))。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | readonly T[] | — | 必填。要分组的扁平数据。 |
groupBy | (item: T) => string | — | 必填。算出这一行的分组 key。key 相同的行在同一组。 |
collapsedGroups | ReadonlySet<string> | — | 必填。当前折叠了的分组 key 集合。 |
onToggleGroup | (groupKey: string) => void | — | 必填。点分组表头时调用,传入这组的 key。 |
renderGroupHeader | (groupKey: string, count: number, collapsed: boolean) => VNodeChild | — | 自定义分组表头的内容,画在折叠按钮右边。默认是 groupKey (count)。 |
getRowKey | (item: T) => string | — | 真实行的稳定 key。不传时按位置生成。 |
groupOrder | readonly string[] | — | 指定分组顺序。没列出来的组按第一次出现的顺序排在这些后面。 |
返回值
| 字段 | 类型 | 说明 |
|---|---|---|
data | ComputedRef<T[]> | 你的行加上每组一个表头,按显示顺序排好。折叠的组留下表头,藏起自己的行。 |
plugin | TablePlugin<T> | 让分组表头占满整行,选择列和行编号跳过它,点一下就切换折叠。 |
idKey | (item: T) => string | 两种行都能算出的行身份:分组表头给分组 key,数据行给 getRowKey 的结果或它的位置。 |
isTableGroupHeader
isTableGroupHeader(item) 把 data 里的一项收窄成分组表头,可以直接读 groupKey 和 count,不用强转。插件用的就是这个判断。
分组表头的字段
| 字段 | 类型 | 说明 |
|---|---|---|
groupKey | string | 这一组的分组 key。 |
count | number | 这一组有多少行。折叠着也是这个数。 |
id | string | 分组表头的稳定 id,由分组 key 拼出来。 |