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).
| Name | Type | Default | Description |
|---|---|---|---|
columns | readonly ColumnSettingsOption<TColumnKey>[] | — | Required. All available columns with metadata for the settings UI. Each entry has key, label, and optional isAlwaysVisible and group. |
activeColumnKeys | readonly 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. |
defaultColumnKeys | readonly TColumnKey[] | — | Default column set for "Reset to default". When omitted, reset shows all columns. |
Returns
useTableColumnSettings() returns one TablePlugin<T>. Pass it to Table in plugins. The plugin fills one field of the plugin contract:
| Name | Type | Description |
|---|---|---|
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.
| Name | Type | Description |
|---|---|---|
activeColumnKeys | readonly TColumnKey[] | The keys you passed in, read through on every access. |
toggleColumn | (key: TColumnKey) => void | Turns one column on or off. An isAlwaysVisible key is ignored. |
isColumnActive | (key: TColumnKey) => boolean | Whether the column is currently shown. Use it to check a picker option. |
isColumnToggleable | (key: TColumnKey) => boolean | Whether the column may be turned off. false for isAlwaysVisible columns, which is what disables their picker option. |
showAllColumns | () => void | Reports every column in columns as active. |
resetToDefault | () => void | Reports defaultColumnKeys, or every column when it is not set. This is what a "Reset to default" button calls. |
setActiveColumnKeys | (keys: readonly TColumnKey[]) => void | Reports the given keys with every isAlwaysVisible key added back, then calls onChangeActiveColumnKeys. |
columnSettingsConfig | UseTableColumnSettingsConfig<TColumnKey> | Config for useTableColumnSettings(), wired to setActiveColumnKeys and carrying defaultColumnKeys. |
ColumnSettingsOption
| Name | Type | Default | Description |
|---|---|---|---|
key | TColumnKey | — | Column key. It must match a TableColumn.key. |
label | string | — | Human-readable label for the settings UI. |
isAlwaysVisible | boolean | false | The column cannot be hidden. Use it for essential columns such as Name or ID. |
group | string | — | Optional group name for organized column lists. Columns with the same group are rendered together under a heading. |