Save and restore selected columns
Persisting user preferences
TanStack · Type Alias
VisibilityState
VisibilityState is TanStack Table’s map of column IDs to visibility flags. Use it to represent which columns are shown or hidden and to control column-visibility state.
How it works
VisibilityState models TanStack Table's column-visibility state as a map from column identifiers to booleans. A true value marks a column visible, while false hides it; identifiers omitted from the map are treated as visible by the feature.
Syntax
export type VisibilityState = Record<string, boolean>Returns
A type alias for Record<string, boolean>; it describes the table's column-visibility map.
Key points
- The alias is a string-keyed boolean record: keys identify columns and values indicate whether each column is visible.
- The table keeps this map as the columnVisibility member of its table state.
- The change callback is typed specifically to receive VisibilityState updates.
- The setter accepts either a visibility value or an updater function through the Updater type.
- The table can set or toggle visibility for every column at once.
Common mistakes
- Omitting a column identifier does not hide it; absent entries are interpreted as visible.
- Supplying onColumnVisibilityChange transfers responsibility for persisting column-visibility updates outside the table.
Example: Define column visibility
import type { VisibilityState } from '@tanstack/react-table'
const visibility: VisibilityState = {
id: true,
email: false,
}
const visibleColumns = Object.entries(visibility)
.filter(([, isVisible]) => isVisible)
.map(([columnId]) => columnId)
console.log(visibleColumns)Creates a visibility map in which each column identifier is associated with whether that column should be shown.
When to use it
Drive visibility checkboxes
Building column controls
Synchronize visibility with application state
Controlled table state
Interview questions
QWhat is the shape and meaning of VisibilityState?
VisibilityState is a Record<string, boolean>. The string key identifies a column, and its boolean value represents that column's visibility.
Follow-up: What happens when a column is absent from the record? It remains visible because missing column IDs are treated as visible.
QHow do you use VisibilityState as controlled table state?
Pass the state through the table's columnVisibility state property. To control updates externally, provide onColumnVisibilityChange, which receives an updater for VisibilityState.
Follow-up: Why must external state be persisted when using the change callback? The callback replaces the table's built-in state management.
QHow can column visibility be changed?
setColumnVisibility accepts an Updater<VisibilityState>, so it can receive either a new visibility value or an updater function. The table also exposes toggling APIs for individual and all columns.
Follow-up: Which API is useful for a checkbox? getToggleVisibilityHandler returns a handler intended to bind to a checkbox input.
Related
VisibilityTableStatecolumnVisibilityonColumnVisibilityChangesetColumnVisibilitytoggleVisibilitytoggleAllColumnsVisiblegetIsVisible