Column pinning
Set enableColumnPinning: true to let users pin columns left or right from the column-actions menu. Pinned columns stay sticky while the table scrolls horizontally.
Column pinning
ID | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Ava | Thompson | Owner | Engineering | active | 22 | Jan 2, 2023 | 0% | $45,000 | ||
| Liam | Nguyen | Admin | Marketing | inactive | 25 | Jan 13, 2023 | 9% | $47,137 | ||
| Noah | Silva | Editor | Design | pending | 28 | Jan 24, 2023 | 18% | $49,274 | ||
| Emma | Carter | Viewer | Sales | active | 31 | Feb 4, 2023 | 27% | $51,411 | ||
| Olivia | Rossi | Owner | Support | inactive | 34 | Feb 15, 2023 | 36% | $53,548 | ||
| William | Walker | Admin | Engineering | pending | 37 | Feb 26, 2023 | 45% | $55,685 | ||
| Sophia | Patel | Editor | Marketing | active | 40 | Mar 9, 2023 | 54% | $57,822 | ||
| James | Muller | Viewer | Design | inactive | 43 | Mar 20, 2023 | 63% | $59,959 | ||
| Isabella | Park | Owner | Sales | pending | 46 | Mar 31, 2023 | 72% | $62,096 | ||
| Lucas | Reyes | Admin | Support | active | 49 | Apr 11, 2023 | 81% | $64,233 | ||
| $4,120,536 |
Rows per page
1–10 of 48
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
enableColumnPinning: true,
})
return <DataTable table={table} />
Initial pins
Pin columns from the start with initialState.columnPinning, grouping ids into left and right.
const table = useDataTable({
data,
columns,
enableColumnPinning: true,
initialState: {
columnPinning: {
left: ["firstName"],
right: ["salary"],
},
},
})
Sticky positioning
Pinned columns rely on the same sticky behavior used elsewhere in the table. See the sticky guide for how that interacts with headers and footers.