Header Groups and Column Virtualization not working when there are a lot of columns
alicenstar opened this issue · 1 comments
material-react-table version
v2.0.5
react & react-dom versions
v18.2.0
Describe the bug and the steps to reproduce it
I have been trying to create a table using MRT that has column virtualization for potentially 100+ columns and 2-3 header groups (as well as some other features like pinning, ordering, etc.). The docs site has some example of header groups and virtualization, but they only have examples with a max of 4 columns. The behavior becomes very odd and glitchy when I tried it with 100+ columns between 2 header groups. I've attached a Stackblitz example that uses only 20 columns, and the header groups behave very oddly (the second header doesn't show at all, and the first one "jumps" along as you scroll horizontally).
Minimal, Reproducible Example - (Optional, but Recommended)
https://stackblitz.com/edit/github-gswgs5?file=src%2FTS.tsx
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
No, because I do not have time to dig into it
Terms
- I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
I currently don't have a solution for this. Don't know how to tell TanStack Virtual how to group different lists with a different length like that.