How to implement subHeaders of similar result
Hello! 👋
I'm trying to implement the following design attached in the image.
As you can see, the gray row below the header is like a subheader (and the row below it is also static).
How can I achieve something like this?
I've tried using the
subHeader but I can't really understand how it works:
https://tanstack.com/table/v8/docs/api/core/header#subheadersHeader | TanStack Table Docs
These are core options and API properties for all headers. More options and API properties may be available for other table features.
Header API
5 Replies
eastern-cyan•3y ago
can't it be done by grouping instead of subHeader?
ratty-blushOP•3y ago
I can try this out, but I wanted to know if there is a more "standard" solution to this. I've been trying to figure this out for days 😣
adverse-sapphire•3y ago
I assume you have seen this example? https://tanstack.com/table/v8/docs/examples/react/sub-components
React Table Sub Components Example | TanStack Table Docs
An example showing how to implement Sub Components in React Table
ratty-blushOP•3y ago
I don't think I have, but it's perfect. Now I understand better how headers work!
Thank you very much!
ratty-blushOP•3y ago
The only problem I find is the order of the headers. Based on the example you linked, here's a fork with a new column:
https://codesandbox.io/p/sandbox/wizardly-colden-2w6ibc?file=%2Fsrc%2Fmain.tsx&selection=%5B%7B%22endColumn%22%3A25%2C%22endLineNumber%22%3A18%2C%22startColumn%22%3A25%2C%22startLineNumber%22%3A18%7D%5D
That
first col should be, in my case, in the same row as Name and Info, not on the third row with First Name, Last name, etc...
Any ideas on how to do this?wizardly-colden-2w6ibc
CodeSandbox is an online editor tailored for web applications.