Implement a virtualized tree structure
I'm implementing a pivot table. I want to use react-virtual to implement the virtualization of the pivot row/column headers. May I know how to achieve that? I wonder if I should use nested virtualization, or flatten the different rows in column headers and virtualize them separately.
Should I use tanstack-table if this is supported there already?
3 Replies
fair-roseOP•8mo ago
Gentle ping
@Ilya Radchenko @piecyk may you shed some light upon this? Thanks
deep-jade•8mo ago
Not sure I'd be much help, but personally I'd only do one direction (the one that can grow dynamically more so then the other) and combine the sidebar and main content into one row
fair-roseOP•8mo ago
Thanks @Ilya Radchenko . Both of the pivot table's row headers and column headers might be long so I can't just virtualize one of them. For the pivot body part, I virtualize it following the grid examples (virtualized rows and each of the rows contains virtualized cells).
But the pivot header's tree structure is trickier. I tried using
Masonry example but it doesn't work for a tree structure because if the first level contains lots of children, we need a very large overscan.
I'm currently trying to split the row headers into 3 lanes and each of the lanes virtualize themselves. But I wonder if you have any better ideas. ThanksReact TanStack Virtual Variable Example | TanStack Virtual Docs
An example showing how to implement Variable in React using TanStack Virtual.