Skip to content

useTableColumnSettings

@astryxdesign/core v0.7.1 · useTableColumnSettings

参数 ​

useTableColumnSettings() 只接一个配置对象。key 存在 ref 里时用 getter 包一层,表格每次读都能拿到最新的值:useTableColumnSettings(() => state.columnSettingsConfig)。

名称类型默认值说明
columnsreadonly ColumnSettingsOption<TColumnKey>[]—必填。全部可选的列,带设置界面要用的信息。每一项有 key、label,还可以有 isAlwaysVisible 和 group。
activeColumnKeysreadonly TColumnKey[]—必填。当前打开的列 key,按显示顺序。只有 key 在这个数组里的列会显示。
onChangeActiveColumnKeys(keys: TColumnKey[]) => void—打开的列变了时调用。useTableColumnSettings() 自己不会调它;它属于 useTableColumnSettingsState() 交回来的那份配置。
defaultColumnKeysreadonly TColumnKey[]—「恢复默认」用的那组列。不传就恢复成全部列。

返回值 ​

useTableColumnSettings() 返回一个 TablePlugin&lt;T&gt;,放进 Table 的 plugins 里。它填的是插件约定里的一个字段:

名称类型说明
transformColumns(columns: TableColumn<T>[]) => TableColumn<T>[]丢掉 key 不在 activeColumnKeys 里的列,再把剩下的按这个数组的顺序排好。

useTableColumnSettingsState ​

配套的组合式函数。它替你拿住这些 key,所有写入都走它,所以 isAlwaysVisible 的列不会被删掉。

ts
const state = useTableColumnSettingsState({
  columns: columnOptions,
  activeColumnKeys: activeKeys,
  onChangeActiveColumnKeys(keys) {
    activeKeys.value = [...keys]
  },
})
const plugin = useTableColumnSettings(state.columnSettingsConfig)

参数和上面那份配置一样,另外多一个 defaultColumnKeys。

名称类型说明
activeColumnKeysreadonly TColumnKey[]你传进来的 key,每次读都重新取值。
toggleColumn(key: TColumnKey) => void开关一列。isAlwaysVisible 的 key 会被忽略。
isColumnActive(key: TColumnKey) => boolean这一列现在是打开的吗。用来勾选选择器里的选项。
isColumnToggleable(key: TColumnKey) => boolean这一列允许被关掉吗。isAlwaysVisible 的列是 false,选择器里把它标成禁用。
showAllColumns() => void把 columns 里的全部列报成打开。
resetToDefault() => void报出 defaultColumnKeys,没设就报出全部列。「恢复默认」按钮调它。
setActiveColumnKeys(keys: readonly TColumnKey[]) => void把给的 key 补上所有 isAlwaysVisible 的 key 再报出去,然后调 onChangeActiveColumnKeys。
columnSettingsConfigUseTableColumnSettingsConfig<TColumnKey>给 useTableColumnSettings() 用的配置,写入接到 setActiveColumnKeys,并带上 defaultColumnKeys。

ColumnSettingsOption ​

名称类型默认值说明
keyTColumnKey—列的 key,必须和某个 TableColumn.key 一致。
labelstring—设置界面里显示的名字。
isAlwaysVisiblebooleanfalse这一列不能被隐藏。用在 Name、ID 这种必须留着的列上。
groupstring—分组名。同组的列在设置列表里排在一起,可以带个小标题。