📄 tanstack/table/v8/docs/api/features/column-pinning

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
------------- ### enableColumnPinning

tsx

enableColumnPinning?: boolean


enableColumnPinning?: boolean

Enables/disables column pinning for all columns in the table.

### onColumnPinningChange

tsx

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 also need to supply state.columnPinning from your own managed state.

Column Def Options
------------------ ### enablePinning

tsx

enablePinning?: boolean


enablePinning?: boolean

Enables/disables pinning for the column.

Table API
--------- ### setColumnPinning

tsx

setColumnPinning: (updater: Updater<ColumnPinningState>) => void


setColumnPinning: (updater: Updater<ColumnPinningState>) => void

Sets or updates the state.columnPinning state.

### resetColumnPinning

tsx

resetColumnPinning: (defaultState?: boolean) => void


resetColumnPinning: (defaultState?: boolean) => void

Resets the columnPinning state to initialState.columnPinning, or true can be passed to force a default blank state reset to { left: [], right: [], }.

### getIsSomeColumnsPinned

tsx

getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => boolean


getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => boolean

Returns 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

tsx

getLeftHeaderGroups: () => HeaderGroup<TData>[]


getLeftHeaderGroups: () => HeaderGroup<TData>[]

Returns the left pinned header groups for the table.

### getCenterHeaderGroups

tsx

getCenterHeaderGroups: () => HeaderGroup<TData>[]


getCenterHeaderGroups: () => HeaderGroup<TData>[]

Returns the unpinned/center header groups for the table.

### getRightHeaderGroups

tsx

getRightHeaderGroups: () => HeaderGroup<TData>[]


getRightHeaderGroups: () => HeaderGroup<TData>[]

Returns the right pinned header groups for the table.

### getLeftFooterGroups

tsx

getLeftFooterGroups: () => HeaderGroup<TData>[]


getLeftFooterGroups: () => HeaderGroup<TData>[]

Returns the left pinned footer groups for the table.

### getCenterFooterGroups

tsx

getCenterFooterGroups: () => HeaderGroup<TData>[]


getCenterFooterGroups: () => HeaderGroup<TData>[]

Returns the unpinned/center footer groups for the table.

### getRightFooterGroups

tsx

getRightFooterGroups: () => HeaderGroup<TData>[]


getRightFooterGroups: () => HeaderGroup<TData>[]

Returns the right pinned footer groups for the table.

### getLeftFlatHeaders

tsx

getLeftFlatHeaders: () => Header<TData>[]


getLeftFlatHeaders: () => Header<TData>[]

Returns a flat array of left pinned headers for the table, including parent headers.

### getCenterFlatHeaders

tsx

getCenterFlatHeaders: () => Header<TData>[]


getCenterFlatHeaders: () => Header<TData>[]

Returns a flat array of unpinned/center headers for the table, including parent headers.

### getRightFlatHeaders

tsx

getRightFlatHeaders: () => Header<TData>[]


getRightFlatHeaders: () => Header<TData>[]

Returns a flat array of right pinned headers for the table, including parent headers.

### getLeftLeafHeaders

tsx

getLeftLeafHeaders: () => Header<TData>[]


getLeftLeafHeaders: () => Header<TData>[]

Returns a flat array of leaf-node left pinned headers for the table.

### getCenterLeafHeaders

tsx

getCenterLeafHeaders: () => Header<TData>[]


getCenterLeafHeaders: () => Header<TData>[]

Returns a flat array of leaf-node unpinned/center headers for the table.

### getRightLeafHeaders

tsx

getRightLeafHeaders: () => Header<TData>[]


getRightLeafHeaders: () => Header<TData>[]

Returns a flat array of leaf-node right pinned headers for the table.

### getLeftLeafColumns

tsx

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


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

Returns all left pinned leaf columns.

### getRightLeafColumns

tsx

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


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

Returns all right pinned leaf columns.

### getCenterLeafColumns

tsx

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


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

Returns all center pinned (unpinned) leaf columns.

Column API
---------- ### getCanPin

tsx

getCanPin: () => boolean


getCanPin: () => boolean

Returns whether or not the column can be pinned.

### getPinnedIndex

tsx

getPinnedIndex: () => number


getPinnedIndex: () => number

Returns the numeric pinned index of the column within a pinned column group.

### getIsPinned

tsx

getIsPinned: () => ColumnPinningPosition


getIsPinned: () => ColumnPinningPosition

Returns the pinned position of the column. ('left', 'right' or false)

### pin

tsx

pin: (position: ColumnPinningPosition) => void


pin: (position: ColumnPinningPosition) => void

Pins a column to the 'left' or 'right', or unpins the column to the center if false is passed.

Row API
------- ### getLeftVisibleCells

tsx

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


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

Returns all left pinned leaf cells in the row.

### getRightVisibleCells

tsx

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


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

Returns all right pinned leaf cells in the row.

### getCenterVisibleCells

tsx

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


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

Returns all center pinned (unpinned) leaf cells in the row.

Edit on GitHub

Column Ordering

Column Sizing

Partners Become a Partner

scarf analytics