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 pinning
# | ID | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Ava | Thompson | Owner | Engineering | active | 22 | $45,000 | Jan 2, 2023 | 0% | ||
| 2 | Liam | Nguyen | Admin | Marketing | inactive | 25 | $47,137 | Jan 13, 2023 | 9% | ||
| 3 | Noah | Silva | Editor | Design | pending | 28 | $49,274 | Jan 24, 2023 | 18% | ||
| 4 | Emma | Carter | Viewer | Sales | active | 31 | $51,411 | Feb 4, 2023 | 27% | ||
| 5 | Olivia | Rossi | Owner | Support | inactive | 34 | $53,548 | Feb 15, 2023 | 36% | ||
| 6 | William | Walker | Admin | Engineering | pending | 37 | $55,685 | Feb 26, 2023 | 45% | ||
| 7 | Sophia | Patel | Editor | Marketing | active | 40 | $57,822 | Mar 9, 2023 | 54% | ||
| 8 | James | Muller | Viewer | Design | inactive | 43 | $59,959 | Mar 20, 2023 | 63% | ||
| 9 | Isabella | Park | Owner | Sales | pending | 46 | $62,096 | Mar 31, 2023 | 72% | ||
| 10 | Lucas | Reyes | Admin | Support | active | 49 | $64,233 | Apr 11, 2023 | 81% | ||
| $4,120,536 |
Rows per page
1–10 of 48
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.