Skip to content

useTableColumnSettings

@astryxdesign/core v0.7.1 · useTableColumnSettings

Parameters ​

useTableColumnSettings() takes one config object. Wrap it in a getter or a ref so the table reads the current keys: useTableColumnSettings(() => state.columnSettingsConfig).

NameTypeDefaultDescription
columnsreadonly ColumnSettingsOption<TColumnKey>[]—Required. All available columns with metadata for the settings UI. Each entry has key, label, and optional isAlwaysVisible and group.
activeColumnKeysreadonly TColumnKey[]—Required. Currently active column keys, in display order. Only columns with keys in this array are shown.
onChangeActiveColumnKeys(keys: TColumnKey[]) => void—Called when active columns change. useTableColumnSettings() never calls it; it belongs to the config that useTableColumnSettingsState() hands back.
defaultColumnKeysreadonly TColumnKey[]—Default column set for "Reset to default". When omitted, reset shows all columns.

Returns ​

useTableColumnSettings() returns one TablePlugin&lt;T&gt;. Pass it to Table in plugins. The plugin fills one field of the plugin contract:

NameTypeDescription
transformColumns(columns: TableColumn<T>[]) => TableColumn<T>[]Drops the columns that are not in activeColumnKeys, then sorts the rest into that array's order.

useTableColumnSettingsState ​

The companion hook. It holds the keys, and every write goes through it so isAlwaysVisible columns cannot be removed.

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

It takes the same fields as the config plus defaultColumnKeys.

NameTypeDescription
activeColumnKeysreadonly TColumnKey[]The keys you passed in, read through on every access.
toggleColumn(key: TColumnKey) => voidTurns one column on or off. An isAlwaysVisible key is ignored.
isColumnActive(key: TColumnKey) => booleanWhether the column is currently shown. Use it to check a picker option.
isColumnToggleable(key: TColumnKey) => booleanWhether the column may be turned off. false for isAlwaysVisible columns, which is what disables their picker option.
showAllColumns() => voidReports every column in columns as active.
resetToDefault() => voidReports defaultColumnKeys, or every column when it is not set. This is what a "Reset to default" button calls.
setActiveColumnKeys(keys: readonly TColumnKey[]) => voidReports the given keys with every isAlwaysVisible key added back, then calls onChangeActiveColumnKeys.
columnSettingsConfigUseTableColumnSettingsConfig<TColumnKey>Config for useTableColumnSettings(), wired to setActiveColumnKeys and carrying defaultColumnKeys.

ColumnSettingsOption ​

NameTypeDefaultDescription
keyTColumnKey—Column key. It must match a TableColumn.key.
labelstring—Human-readable label for the settings UI.
isAlwaysVisiblebooleanfalseThe column cannot be hidden. Use it for essential columns such as Name or ID.
groupstring—Optional group name for organized column lists. Columns with the same group are rendered together under a heading.