Sticky header
Hi, how do I implement a sticky header? I know about position sticky, but I also have overflow on my table, and that invalidates sticky. The only way I've been able to do it, is by creating a different table for the headers and syncing the scroll, but that is very cumbersome and not very performant.
This is more a CSS issue, but would be nice if the library supported this somehow?
1 Reply
ambitious-aqua•2y ago
Implementing a Sticky header is entirely possible. And yes with Tanstack Table v8+ it's all down to the CSS as this library is a headless UI.
For specific guidance you'll need to post an example of what you have.
Otherwise, here's the Kitchen Sink example with a sticky header. Check the styles declaration in the App.tsx for an idea of the CSS required.
https://codesandbox.io/p/devbox/practical-pateu-pmrc9l?file=%2Fsrc%2FApp.tsx%3A37%2C22
Good luck.