Column Visibility APIs
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.
Row API
getVisibleCells
getVisibleCells: () => Cell<TData>[]
getVisibleCells: () => Cell<TData>[]
Returns an array of cells that account for column visibility for the row.
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.