useTableSelectionState
@astryxdesign/core v0.7.1 · useTableSelectionState
data 和 selectedKeys 是 MaybeRefOrGetter,传 ref 或 getter 才能保持实时。其它字段从你传入的配置对象上读。
全选只动真的能勾的行:getIsItemSelectable 或 getIsItemEnabled 返回 false 的行保留原来的状态,不在 data 里的键也照样留着。
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | MaybeRefOrGetter<readonly T[]> | — | 表格里渲染的完整数据数组。 |
idKey | (keyof T & string) | ((item: T) => string) | — | 键提取:存放唯一字符串 ID 的属性名,或者从行里取出这个 ID 的函数。 |
selectedKeys | MaybeRefOrGetter<ReadonlySet<string>> | — | 受控的选中 ID 集合。 |
setSelectedKeys | (keys: Set<string>) => void | — | 选中集合的写回函数。它每次给的都是一个算好的 Set,你把它赋给自己的 ref 就行。原版那种同时接受 updater 的派发器(例如 React 的 setState)也符合这个签名,可以直接传。 |
getIsItemSelectable | (item: T) => boolean | () => true | 这一行要不要显示复选框。返回 false 的行连复选框都没有,也不算进全选。 |
getIsItemEnabled | (item: T) => boolean | () => true | 这一行的复选框能不能点。返回 false 时复选框还在但是禁用,而且被冻结:全选会保留它原来的状态。 |
getRowLabel | (item: T) => string | — | 原样传给选择插件,做行复选框的标签。 |
hasRowHighlight | boolean | true | 原样传给选择插件。设成 false 后,选中的行不再铺浅色底,aria-selected 仍然保留。 |
返回值
| 字段 | 类型 | 说明 |
|---|---|---|
selectionConfig | UseTableSelectionConfig<T> & { readonly rows: readonly T[] } | useTableSelection 需要的全部内容。另外带一个 rows getter,能直接拿到当前数据,处理全选时不用另外传。 |
selectionState | TableSelectionState | 给选择相关界面用的只读快照。传给 TableSelectionToolbar 后,一个都没选中时工具栏自动不渲染。 |
selectionState.selectedKeys | ReadonlySet<string> | 选中的全部键,包含不在当前页上的行。 |
selectionState.selectedCount | number | 选中了多少个键。 |
selectionState.hasSelection | boolean | 至少选中一个键时为 true。 |
selectionState.clearSelection | () => void | 用一个空 Set 调 setSelectedKeys。 |