Skip to content

useTableGroupedRows

@astryxdesign/core v0.7.1 · useTableGroupedRows

参数 ​

useTableGroupedRows() 只有一个配置对象。用 getter 或 ref 包一层,分组才能跟着当前的行和当前的折叠集合走:useTableGroupedRows(() => ({ ... }))。

名称类型默认值说明
datareadonly T[]—必填。要分组的扁平数据。
groupBy(item: T) => string—必填。算出这一行的分组 key。key 相同的行在同一组。
collapsedGroupsReadonlySet<string>—必填。当前折叠了的分组 key 集合。
onToggleGroup(groupKey: string) => void—必填。点分组表头时调用,传入这组的 key。
renderGroupHeader(groupKey: string, count: number, collapsed: boolean) => VNodeChild—自定义分组表头的内容,画在折叠按钮右边。默认是 groupKey (count)。
getRowKey(item: T) => string—真实行的稳定 key。不传时按位置生成。
groupOrderreadonly string[]—指定分组顺序。没列出来的组按第一次出现的顺序排在这些后面。

返回值 ​

字段类型说明
dataComputedRef<T[]>你的行加上每组一个表头,按显示顺序排好。折叠的组留下表头,藏起自己的行。
pluginTablePlugin<T>让分组表头占满整行,选择列和行编号跳过它,点一下就切换折叠。
idKey(item: T) => string两种行都能算出的行身份:分组表头给分组 key,数据行给 getRowKey 的结果或它的位置。

isTableGroupHeader ​

isTableGroupHeader(item) 把 data 里的一项收窄成分组表头,可以直接读 groupKey 和 count,不用强转。插件用的就是这个判断。

分组表头的字段 ​

字段类型说明
groupKeystring这一组的分组 key。
countnumber这一组有多少行。折叠着也是这个数。
idstring分组表头的稳定 id,由分组 key 拼出来。