Skip to content

useTableSelectionState

@astryxdesign/core v0.7.1 · useTableSelectionState

data 和 selectedKeys 是 MaybeRefOrGetter,传 ref 或 getter 才能保持实时。其它字段从你传入的配置对象上读。

全选只动真的能勾的行:getIsItemSelectable 或 getIsItemEnabled 返回 false 的行保留原来的状态,不在 data 里的键也照样留着。

参数 ​

参数类型默认值说明
dataMaybeRefOrGetter<readonly T[]>—表格里渲染的完整数据数组。
idKey(keyof T & string) | ((item: T) => string)—键提取:存放唯一字符串 ID 的属性名,或者从行里取出这个 ID 的函数。
selectedKeysMaybeRefOrGetter<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—原样传给选择插件,做行复选框的标签。
hasRowHighlightbooleantrue原样传给选择插件。设成 false 后,选中的行不再铺浅色底,aria-selected 仍然保留。

返回值 ​

字段类型说明
selectionConfigUseTableSelectionConfig<T> & { readonly rows: readonly T[] }useTableSelection 需要的全部内容。另外带一个 rows getter,能直接拿到当前数据,处理全选时不用另外传。
selectionStateTableSelectionState给选择相关界面用的只读快照。传给 TableSelectionToolbar 后,一个都没选中时工具栏自动不渲染。
selectionState.selectedKeysReadonlySet<string>选中的全部键,包含不在当前页上的行。
selectionState.selectedCountnumber选中了多少个键。
selectionState.hasSelectionboolean至少选中一个键时为 true。
selectionState.clearSelection() => void用一个空 Set 调 setSelectedKeys。