Column Pinning

Examples & API

Guide

Column pinning can be implemented using two approaches: splitting pinned columns into separate tables, or keeping all columns in a single table while using pinning state for column ordering and sticky CSS for visual positioning.

Column Order Priority

Three table features can reorder columns, applied in the following order:

Column Pinning – Columns are split into left, center (unpinned), and right pinned columns.
Column Ordering
Grouping

The columnPinning.left and columnPinning.right state controls the order of pinned columns. The columnOrder state only affects unpinned ("center") columns.

Manage Column Pinning State

The table manages columnPinning state internally by default. Manage state manually for features like persistence or external state synchronization:

const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
  left: [],
  right: [],
})

const table = useReactTable({
  // ...
  state: {
    columnPinning,
  },
  onColumnPinningChange: setColumnPinning,
})

Pin Columns by Default

Initialize the columnPinning state or use the initialState table option to set default pinned columns:

const table = useReactTable({
  // ...
  initialState: {
    columnPinning: {
      left: ["expand-column"],
      right: ["actions-column"],
    },
  },
})

Column Pinning APIs

column.getCanPin: Determines if a column can be pinned.
column.pin: Pins a column to the left or right, or unpins a column.
column.getIsPinned: Returns the pinning position of a column.
column.getStart: Returns the left CSS value for a pinned column.
column.getAfter: Returns the right CSS value for a pinned column.
column.getIsLastColumn: Determines if a column is the last in its pinned group (useful for box-shadow styling).
column.getIsFirstColumn: Determines if a column is the first in its pinned group (useful for box-shadow styling).

Column Ordering Guide

Column Sizing Guide