File: row-pinning.md | Updated: 11/15/2025
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
React
Version
Latest
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
React
Version
Latest
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
On this page
Copy Markdown
The ability for a row to be pinned is determined by the following:
Pinning state is stored on the table using the following shape:
tsx
export type RowPinningPosition = false | 'top' | 'bottom'
export type RowPinningState = {
top?: string[]
bottom?: string[]
}
export type RowPinningRowState = {
rowPinning: RowPinningState
}
export type RowPinningPosition = false | 'top' | 'bottom'
export type RowPinningState = {
top?: string[]
bottom?: string[]
}
export type RowPinningRowState = {
rowPinning: RowPinningState
}
Table Options
-------------
### enableRowPinning
tsx
enableRowPinning?: boolean | ((row: Row<TData>) => boolean)
enableRowPinning?: boolean | ((row: Row<TData>) => boolean)
Enables/disables row pinning for all rows in the table.
tsx
keepPinnedRows?: boolean
keepPinnedRows?: boolean
When false, pinned rows will not be visible if they are filtered or paginated out of the table. When true, pinned rows will always be visible regardless of filtering or pagination. Defaults to true.
tsx
onRowPinningChange?: OnChangeFn<RowPinningState>
onRowPinningChange?: OnChangeFn<RowPinningState>
If provided, this function will be called with an updaterFn when state.rowPinning changes. This overrides the default internal state management, so you will also need to supply state.rowPinning from your own managed state.
Table API
---------
### setRowPinning
tsx
setRowPinning: (updater: Updater<RowPinningState>) => void
setRowPinning: (updater: Updater<RowPinningState>) => void
Sets or updates the state.rowPinning state.
tsx
resetRowPinning: (defaultState?: boolean) => void
resetRowPinning: (defaultState?: boolean) => void
Resets the rowPinning state to initialState.rowPinning, or true can be passed to force a default blank state reset to {}.
tsx
getIsSomeRowsPinned: (position?: RowPinningPosition) => boolean
getIsSomeRowsPinned: (position?: RowPinningPosition) => boolean
Returns whether or not any rows are pinned. Optionally specify to only check for pinned rows in either the top or bottom position.
tsx
getTopRows: () => Row<TData>[]
getTopRows: () => Row<TData>[]
Returns all top pinned rows.
tsx
getBottomRows: () => Row<TData>[]
getBottomRows: () => Row<TData>[]
Returns all bottom pinned rows.
tsx
getCenterRows: () => Row<TData>[]
getCenterRows: () => Row<TData>[]
Returns all rows that are not pinned to the top or bottom.
tsx
pin: (position: RowPinningPosition) => void
pin: (position: RowPinningPosition) => void
Pins a row to the 'top' or 'bottom', or unpins the row to the center if false is passed.
tsx
getCanPin: () => boolean
getCanPin: () => boolean
Returns whether or not the row can be pinned.
tsx
getIsPinned: () => RowPinningPosition
getIsPinned: () => RowPinningPosition
Returns the pinned position of the row. ('top', 'bottom' or false)
tsx
getPinnedIndex: () => number
getPinnedIndex: () => number
Returns the numeric pinned index of the row within a pinned row group.
