Column Visibility

State

Column visibility state is stored on the table using the following shape:

export type VisibilityState = Record<string, boolean>
 
export type VisibilityTableState = {
  columnVisibility: VisibilityState
}

export type VisibilityState = Record<string, boolean>
 
export type VisibilityTableState = {
  columnVisibility: VisibilityState
}

Column Def Options

enableHiding

enableHiding?: boolean

enableHiding?: boolean

Enables/disables hiding the column

Column API

getCanHide

getCanHide: () => boolean

getCanHide: () => boolean

Returns whether the column can be hidden

getIsVisible

getIsVisible: () => boolean

getIsVisible: () => boolean

Returns whether the column is visible

toggleVisibility

toggleVisibility: (value?: boolean) => void

toggleVisibility: (value?: boolean) => void

Toggles the column visibility

getToggleVisibilityHandler

getToggleVisibilityHandler: () => (event: unknown) => void

getToggleVisibilityHandler: () => (event: unknown) => void

Returns a function that can be used to toggle the column visibility. This function can be used to bind to an event handler to a checkbox.

Table Options

onColumnVisibilityChange

onColumnVisibilityChange?: OnChangeFn<VisibilityState>

onColumnVisibilityChange?: OnChangeFn<VisibilityState>

If provided, this function will be called with an updaterFn when state.columnVisibility changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.

enableHiding

enableHiding?: boolean

enableHiding?: boolean

Enables/disables hiding of columns.

Table API

getVisibleFlatColumns

getVisibleFlatColumns: () => Column < TData > []

getVisibleFlatColumns: () => Column < TData > []

Returns a flat array of columns that are visible, including parent columns.

getVisibleLeafColumns

getVisibleLeafColumns: () => Column < TData > []

getVisibleLeafColumns: () => Column < TData > []

Returns a flat array of leaf-node columns that are visible.

getLeftVisibleLeafColumns

getLeftVisibleLeafColumns: () => Column < TData > []

getLeftVisibleLeafColumns: () => Column < TData > []

If column pinning, returns a flat array of leaf-node columns that are visible in the left portion of the table.

getRightVisibleLeafColumns

getRightVisibleLeafColumns: () => Column < TData > []

getRightVisibleLeafColumns: () => Column < TData > []

If column pinning, returns a flat array of leaf-node columns that are visible in the right portion of the table.

getCenterVisibleLeafColumns

getCenterVisibleLeafColumns: () => Column < TData > []

getCenterVisibleLeafColumns: () => Column < TData > []

If column pinning, returns a flat array of leaf-node columns that are visible in the unpinned/center portion of the table.

setColumnVisibility

setColumnVisibility: (updater: Updater<VisibilityState>) => void

setColumnVisibility: (updater: Updater<VisibilityState>) => void

Updates the column visibility state via an updater function or value

resetColumnVisibility

resetColumnVisibility: (defaultState?: boolean) => void

resetColumnVisibility: (defaultState?: boolean) => void

Resets the column visibility state to the initial state. If defaultState is provided, the state will be reset to {}

toggleAllColumnsVisible

toggleAllColumnsVisible: (value?: boolean) => void

toggleAllColumnsVisible: (value?: boolean) => void

Toggles the visibility of all columns

getIsAllColumnsVisible

getIsAllColumnsVisible: () => boolean

getIsAllColumnsVisible: () => boolean

Returns whether all columns are visible

getIsSomeColumnsVisible

getIsSomeColumnsVisible: () => boolean

getIsSomeColumnsVisible: () => boolean

Returns whether some columns are visible

getToggleAllColumnsVisibilityHandler

getToggleAllColumnsVisibilityHandler: () => ((event: unknown) => void)

getToggleAllColumnsVisibilityHandler: () => ((event: unknown) => void)

Returns a handler for toggling the visibility of all columns, meant to be bound to a input[type=checkbox] element.

Credits

• Column Visibility - TanStack Table v8 Docs