Sticky header & footer
The header row (enableStickyHeader, default true) sticks to the top of the scroll surface, and the aggregation/footer row (enableStickyFooter, default true) sticks to the bottom. As you scroll through rows, both stay pinned in view.
ID | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Ava | Thompson | Owner | Engineering | active | 22 | $45,000 | Jan 2, 2023 | 0% | ||
| Liam | Nguyen | Admin | Marketing | inactive | 25 | $47,137 | Jan 13, 2023 | 9% | ||
| Noah | Silva | Editor | Design | pending | 28 | $49,274 | Jan 24, 2023 | 18% | ||
| Emma | Carter | Viewer | Sales | active | 31 | $51,411 | Feb 4, 2023 | 27% | ||
| Olivia | Rossi | Owner | Support | inactive | 34 | $53,548 | Feb 15, 2023 | 36% | ||
| William | Walker | Admin | Engineering | pending | 37 | $55,685 | Feb 26, 2023 | 45% | ||
| Sophia | Patel | Editor | Marketing | active | 40 | $57,822 | Mar 9, 2023 | 54% | ||
| James | Muller | Viewer | Design | inactive | 43 | $59,959 | Mar 20, 2023 | 63% | ||
| Isabella | Park | Owner | Sales | pending | 46 | $62,096 | Mar 31, 2023 | 72% | ||
| Lucas | Reyes | Admin | Support | active | 49 | $64,233 | Apr 11, 2023 | 81% | ||
| Mia | Johansson | Editor | Engineering | inactive | 52 | $66,370 | Apr 22, 2023 | 90% | ||
| Benjamin | Costa | Viewer | Marketing | pending | 55 | $68,507 | May 3, 2023 | 99% | ||
| Charlotte | Chen | Owner | Design | active | 58 | $70,644 | May 14, 2023 | 7% | ||
| Henry | Cohen | Admin | Sales | inactive | 61 | $72,781 | May 25, 2023 | 16% | ||
| Amelia | Novak | Editor | Support | pending | 24 | $74,918 | Jun 5, 2023 | 25% | ||
| Jack | Diaz | Viewer | Engineering | active | 27 | $77,055 | Jun 16, 2023 | 34% | ||
| Harper | Dubois | Owner | Marketing | inactive | 30 | $79,192 | Jun 27, 2023 | 43% | ||
| Leo | Haddad | Admin | Design | pending | 33 | $81,329 | Jul 8, 2023 | 52% | ||
| Ella | Khan | Editor | Sales | active | 36 | $83,466 | Jul 19, 2023 | 61% | ||
| Mason | Tanaka | Viewer | Support | inactive | 39 | $85,603 | Jul 30, 2023 | 70% | ||
| Ava | Thompson | Owner | Engineering | pending | 42 | $87,740 | Aug 10, 2023 | 79% | ||
| Liam | Nguyen | Admin | Marketing | active | 45 | $89,877 | Aug 21, 2023 | 88% | ||
| Noah | Silva | Editor | Design | inactive | 48 | $92,014 | Sep 1, 2023 | 97% | ||
| Emma | Carter | Viewer | Sales | pending | 51 | $94,151 | Sep 12, 2023 | 5% | ||
| Olivia | Rossi | Owner | Support | active | 54 | $96,288 | Sep 23, 2023 | 14% | ||
| William | Walker | Admin | Engineering | inactive | 57 | $98,425 | Oct 4, 2023 | 23% | ||
| Sophia | Patel | Editor | Marketing | pending | 60 | $100,562 | Oct 15, 2023 | 32% | ||
| James | Muller | Viewer | Design | active | 23 | $102,699 | Oct 26, 2023 | 41% | ||
| Isabella | Park | Owner | Sales | inactive | 26 | $104,836 | Nov 6, 2023 | 50% | ||
| Lucas | Reyes | Admin | Support | pending | 29 | $106,973 | Nov 17, 2023 | 59% | ||
| Mia | Johansson | Editor | Engineering | active | 32 | $109,110 | Nov 28, 2023 | 68% | ||
| Benjamin | Costa | Viewer | Marketing | inactive | 35 | $111,247 | Dec 9, 2023 | 77% | ||
| Charlotte | Chen | Owner | Design | pending | 38 | $113,384 | Dec 20, 2023 | 86% | ||
| Henry | Cohen | Admin | Sales | active | 41 | $115,521 | Dec 31, 2023 | 95% | ||
| Amelia | Novak | Editor | Support | inactive | 44 | $117,658 | Jan 11, 2024 | 3% | ||
| Jack | Diaz | Viewer | Engineering | pending | 47 | $119,795 | Jan 22, 2024 | 12% | ||
| Harper | Dubois | Owner | Marketing | active | 50 | $121,932 | Feb 2, 2024 | 21% | ||
| Leo | Haddad | Admin | Design | inactive | 53 | $124,069 | Feb 13, 2024 | 30% | ||
| Ella | Khan | Editor | Sales | pending | 56 | $126,206 | Feb 24, 2024 | 39% | ||
| Mason | Tanaka | Viewer | Support | active | 59 | $128,343 | Mar 6, 2024 | 48% | ||
| $3,466,860 |
Bounded surface height
Sticky behavior requires a bounded scroll surface — there is nothing to stick to if the table grows to fit all its rows. Give the surface a max height with surfaceClassName on <DataTable />:
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
enableStickyHeader: true,
enableStickyFooter: true,
})
return <DataTable table={table} surfaceClassName="max-h-[460px]" />
Once the surface is bounded and the content overflows, the header pins to the top and the footer pins to the bottom while the rows scroll between them.
Footer cells
Footer cells are populated from each column's footer definition or from aggregation values. See Grouping for how aggregation rows are produced.
Nothing to stick to?
If the header or footer is not sticking, the surface is probably not bounded. Confirm surfaceClassName sets a max-h-* (or other height constraint) and that the data actually overflows it.