Column Visibility APIs

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

export type VisibilityState = Record<string, boolean>

export type VisibilityTableState = {
  columnVisibility: VisibilityState
}

enableHiding?: boolean

Enables/disables hiding the column

getCanHide: () => boolean

Returns whether the column can be hidden

getIsVisible: () => boolean

Returns whether the column is visible

toggleVisibility: (value?: boolean) => void

Toggles the column visibility

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.

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?: boolean

Enables/disables hiding of columns.

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

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

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

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

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: () => Column<TData>[]

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

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: (updater: Updater<VisibilityState>) => void

Updates the column visibility state via an updater function or value

resetColumnVisibility: (defaultState?: boolean) => void

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

toggleAllColumnsVisible: (value?: boolean) => void

Toggles the visibility of all columns

getIsAllColumnsVisible: () => boolean

Returns whether all columns are visible

getIsSomeColumnsVisible: () => boolean

Returns whether some columns are visible

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

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

getVisibleCells: () => Cell<TData>[]

Returns an array of cells that account for column visibility for the row.