Row pinning
Set enableRowPinning: true to add a pin toggle inside the row-number column. Pinned rows stick to the top while you scroll the rest of the table.
Because the toggle lives in the row-number column, row pinning pairs with enableRowNumbers: true.
Row pinningPin rows to the top via the row-number column.
tsx
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
enableRowNumbers: true,
enableRowPinning: true,
})
return <DataTable table={table} />
Enable row numbers
Turn on enableRowNumbers so the pin toggle has a column to live in.
Display modes
rowPinningDisplayMode sets where pinned rows show and how rows get pinned:
| Mode | Pinned rows | Pinned by |
|---|---|---|
"top-and-bottom" (default) | Stay in view above (or below) the other rows while scrolling | The pin button (to the top), or row.pin("bottom") |
"top" / "bottom" | The same | The pin button, to that side |
"static" | Listed first (or last), and scroll away with the rest | The pin button |
"select-top" / "select-bottom" | Stay in view on that side | Selecting the row; deselecting unpins it. No pin buttons |
tsx
useDataTable({
data,
columns,
enableRowSelection: true,
enableRowPinning: true,
rowPinningDisplayMode: "select-top", // selected rows stay in view at the top
})
Sticky pinned rows have a solid line and a soft shadow on the edge that faces the other rows. They need a bounded scroll surface, which the table has by default (see Sticky header & footer).
Row pinning modesSticky, static and selection-driven pinned rows.
rowPinningDisplayMode
Related
useDataTable optionsuseDataTable(options) accepts everything TanStack's TableOptions accepts (controlled state, on*Change, manual* flags, getRowId, getSubRows, initialState, …; column pinning in state/initialState keeps the left/right shape) plus the data-table options below.Table instanceuseDataTable returns the standard TanStack table instance with three additions: the table's UI state in table.getState() (density, editing, filter modes…), methods to change it on table itself, and the resolved options and DOM refs on table.dataTable.Row numbersSet enableRowNumbers: true to add a leading row-number column to the table.