Creating a virtualized table of dynamic container size
I am trying to use tanstack Table in conjunction with tanstack Virtual to make a table that can contain both a lot of elements and also support infinite scroll. For the most part, functionally, it seems to be working great. But for the life of me I cannot figure out how to make the container dynamic to the viewport. I have two elements in a psuedo-fullscreen page where the table should grow to fill all remaining space. However all the examples in the docs combining these two libraries use fixed container height, and explicitly state that they have to. Other than that the docs seem a bit sparse for me to figure out how best to implement this.
3 Replies
multiple-amethyst•7mo ago
Virtual is using RO to track height and width of scroll container, you can use flex containers to fill remaning space in parent container
correct-apricotOP•7mo ago
👍 thanks, I did seem to get this working by just omitting the height constraint and adding apropriate sizing styles in the hierarchy
sensitive-blue•6mo ago
Dig deeper into how flex works - which can always fill up the available height.
Here is an amazing resource: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
An Interactive Guide to Flexbox in CSS • Josh W. Comeau
When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨