Sticky header and footer

Basics

enableStickyHeader holds the header cells against the top of the scroll container. enableStickyFooter does the same for the tfoot. Both need the container to be the thing that scrolls, which means it needs a bounded height:

<DataTable enableStickyHeader maxHeight={480} data={rows} columns={columns} />

maxHeight is the usual way to give it one; a parent with a fixed height works just as well.

Both directions at once

With pinned columns, a pinned header cell is stuck vertically and horizontally: it stays in the corner while the table scrolls both ways. That is one position rule, not two features interfering.

Pagination stays put

The pagination control sits outside the scroll container, so it is always visible. Scrolling to the last row and finding no way to reach page two is a bug this layout cannot have.

Customization

The header background is --tk-header-bg and the shadow that appears when content passes underneath is a token as well, so a sticky header can be flat, raised or bordered without touching the markup.

Sticky headers and virtualization compose: the header is outside the virtual window, so it does not move as rows are recycled.

Limitations

• A sticky header needs a bounded height. Without one the page scrolls instead of the container and nothing sticks; the table warns about this in development.
• A very tall header group eats the viewport. Two header rows plus a filter row on a short screen leaves little for data.
• position: sticky cannot escape an ancestor with overflow: hidden. If the header will not stick, that ancestor is usually why.

API

• DataTableProps: enableStickyHeader, enableStickyFooter, maxHeight, minWidth, maxWidth, layout, bordered.
• Theme tokens: --tk-header-bg, --tk-z-pinned-header.