Column Pinning
The ability to pin columns to the left or right of the table.
Can-Pin
The ability for a column to be pinned is determined by the following:
options.enablePinningis not set tofalsecolumnDefinition.enablePinningis not set tofalse
State
Column pinning state is stored on the table using the following shape:
export type ColumnPinningPosition = false | "left" | "right"
export type ColumnPinningState = {
left?: string[]
right?: string[]
}
export type ColumnPinningTableState = {
columnPinning: ColumnPinningState
}export type ColumnPinningPosition = false | "left" | "right"
export type ColumnPinningState = {
left?: string[]
right?: string[]
}
export type ColumnPinningTableState = {
columnPinning: ColumnPinningState
}Table Options
enablePinning
enablePinning?: booleanenablePinning?: booleanEnables/disables all pinning for the table.
onColumnPinningChange
onColumnPinningChange?: OnChangeFn<ColumnPinningState>onColumnPinningChange?: OnChangeFn<ColumnPinningState>If provided, this function will be called with an updaterFn when state.columnPinning 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.
Column Def Options
enablePinning
enablePinning?: booleanenablePinning?: booleanEnables/disables pinning for the column.
Table API
setColumnPinning
setColumnPinning: (updater: Updater<ColumnPinningState>) => voidsetColumnPinning: (updater: Updater<ColumnPinningState>) => voidSets or updates the state.columnPinning state.
resetColumnPinning
resetColumnPinning: (defaultState?: boolean) => voidresetColumnPinning: (defaultState?: boolean) => voidResets the columnPinning state to initialState.columnPinning, or true can be passed to force a default blank state reset to { left: [], right: [], }.
getIsSomeColumnsPinned
getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => booleangetIsSomeColumnsPinned: (position?: ColumnPinningPosition) => booleanReturns whether or not any columns are pinned. Optionally specify to only check for pinned columns in either the left or right position.
Note: Does not account for column visibility
getLeftHeaderGroups
getLeftHeaderGroups: () => HeaderGroup < TData > []getLeftHeaderGroups: () => HeaderGroup < TData > []Returns the left pinned header groups for the table.
getCenterHeaderGroups
getCenterHeaderGroups: () => HeaderGroup < TData > []getCenterHeaderGroups: () => HeaderGroup < TData > []Returns the unpinned/center header groups for the table.
getRightHeaderGroups
getRightHeaderGroups: () => HeaderGroup < TData > []getRightHeaderGroups: () => HeaderGroup < TData > []Returns the right pinned header groups for the table.
getLeftFooterGroups
getLeftFooterGroups: () => HeaderGroup < TData > []getLeftFooterGroups: () => HeaderGroup < TData > []Returns the left pinned footer groups for the table.
getCenterFooterGroups
getCenterFooterGroups: () => HeaderGroup < TData > []getCenterFooterGroups: () => HeaderGroup < TData > []Returns the unpinned/center footer groups for the table.
getRightFooterGroups
getRightFooterGroups: () => HeaderGroup < TData > []getRightFooterGroups: () => HeaderGroup < TData > []Returns the right pinned footer groups for the table.
getLeftFlatHeaders
getLeftFlatHeaders: () => Header < TData > []getLeftFlatHeaders: () => Header < TData > []Returns a flat array of left pinned headers for the table, including parent headers.
getCenterFlatHeaders
getCenterFlatHeaders: () => Header < TData > []getCenterFlatHeaders: () => Header < TData > []Returns a flat array of unpinned/center headers for the table, including parent headers.
getRightFlatHeaders
getRightFlatHeaders: () => Header < TData > []getRightFlatHeaders: () => Header < TData > []Returns a flat array of right pinned headers for the table, including parent headers.
getLeftLeafHeaders
getLeftLeafHeaders: () => Header < TData > []getLeftLeafHeaders: () => Header < TData > []Returns a flat array of leaf-node left pinned headers for the table.
getCenterLeafHeaders
getCenterLeafHeaders: () => Header < TData > []getCenterLeafHeaders: () => Header < TData > []Returns a flat array of leaf-node unpinned/center headers for the table.
getRightLeafHeaders
getRightLeafHeaders: () => Header < TData > []getRightLeafHeaders: () => Header < TData > []Returns a flat array of leaf-node right pinned headers for the table.
getLeftLeafColumns
getLeftLeafColumns: () => Column < TData > []getLeftLeafColumns: () => Column < TData > []Returns all left pinned leaf columns.
getRightLeafColumns
getRightLeafColumns: () => Column < TData > []getRightLeafColumns: () => Column < TData > []Returns all right pinned leaf columns.
getCenterLeafColumns
getCenterLeafColumns: () => Column < TData > []getCenterLeafColumns: () => Column < TData > []Returns all center pinned (unpinned) leaf columns.
Column API
getCanPin
getCanPin: () => booleangetCanPin: () => booleanReturns whether or not the column can be pinned.
getPinnedIndex
getPinnedIndex: () => numbergetPinnedIndex: () => numberReturns the numeric pinned index of the column within a pinned column group.
getIsPinned
getIsPinned: () => ColumnPinningPositiongetIsPinned: () => ColumnPinningPositionReturns the pinned position of the column. ('left', 'right' or false)
pin
pin: (position: ColumnPinningPosition) => voidpin: (position: ColumnPinningPosition) => voidPins a column to the 'left' or 'right', or unpins the column to the center if false is passed.
Row API
getLeftVisibleCells
getLeftVisibleCells: () => Cell < TData > []getLeftVisibleCells: () => Cell < TData > []Returns all left pinned leaf cells in the row.
getRightVisibleCells
getRightVisibleCells: () => Cell < TData > []getRightVisibleCells: () => Cell < TData > []Returns all right pinned leaf cells in the row.
getCenterVisibleCells
getCenterVisibleCells: () => Cell < TData > []getCenterVisibleCells: () => Cell < TData > []Returns all center pinned (unpinned) leaf cells in the row.
Credits
- Column Pinning - TanStack Table
v8Docs