Tanstack virtual with multiple sections without fixed heights
Hi everyone 👋
I'm currently looking into how I can implement TanStack virtual for a grid like setup with the setup in the screenshot.
I originally thought I could potentially use 2 window virtualizers but that conceptually doesn't make too much sense nor does it seem adviseable.
Would it be as simple as having 2 virtualizers which leverage the lanes functionality ? So in this case it would be one for "Files" and one for "Folders" ?
If I did go ahad with the above and I didn't defined a fixed height myself would it even benefit from virutalization, ugh this is driving me nuts 😂 It's usually pretty straight as I've only used it for simple lists which have fixed heights but this particular setup can't have that.
Any comments or feedback would be fab, this is driving me nuts.
Thanks,
Alex M
1 Reply
deep-jade•6mo ago
Ideally I believe lane solution would work great if its just one grid like setup, but here you want separate sections for folders and files also virtulization inherently needs a scrollable area with height so I am not sure if something you can achieve without height.
IMO its an overkill unless you're actually facing performance issues - I also looked at google drive which I believe is also not implementing virtulization which has quite a similar structure
Google photos on the contrary does implement virutlization with grid like structure but its a continuous grid.
Also when you implement virtulization resizing is yet another thing you might wanna look into if you're targeting responsiveness, because then you need to have breakpoints you can observe and setup different lane sizes for the viewport sizes and you also need to think about scroll restoration which doesn't happen automatically.