Implementing a grid of cards with infinite scroll using WindowVirtualizer

[sazzouz]

Hi. I'm trying to implement what I would consider to be (perhaps naively) a straightforward use of the WindowVirtualizer component, whereby I'm trying to build a gallery-style interface with infinite scroll using the popular TanStack Query library. After following the various demos which showcase infinite scroll, I've been unable to build the behaviour i am looking for. In short, the onRangeChange callback isn't firing because the direct child of the virtualizer wrapper is a grid element (styled with typical TailwindCSS), within which I am rendering items with the data returned from my API. Rendering the children directly, resulting in a long list, works as expected, and I can see onRangeChange firing when it is supposed to. Therefore, i'm unable to achieve the grid layout i desire because the virtualizer is added to the DOM, breaking the parent-child structure needed for the styling to apply, i.e. it will just be a single huge column. I've lookd at the experimental Grid virtualizer, but I have no need for the horizontal scroll which appears to be the main benefit of it.

So, I'm just looking for guidance on what the right way round to do this is and if others have implemented something similar, or if I'm even using the correct virtualizer component in this case. Any help would be really appreciated.

[inokawa]

The children of Virtualizer/VList must be elements array or a render prop, not a wrapper div. If you want to customize the element over the children, you can use as prop of Virtualizer.

It's not built with React, but there is an example of virtulization with css grid styling.
https://inokawa.github.io/virtua/?path=/story/solid_virtualizer--div-table