Any pitfalls or reason to not have multiple records in a row when using useWindowVirtualizer?
Use case is infinite scroll where each row contains three records
4 Replies
optimistic-gold•3y ago
@kylelovesyou I am also having the same use case(each row contains three records). Did you achieve this use case?
fascinating-indigo•3y ago
Hi, it's ok just each virtual row will contain 3 rows
optimistic-gold•3y ago
Hi @piecyk , Thank you for your reply. Could you please provide a sandbox link(each row contains three items) or sample code? I arranged three items in a row using CSS but the scroll not working as expected.
I am using tanstack useWindowVirtualizer with useInfiniteQuery, react
sensitive-blue•3y ago
I'm doing this (kinda) here: https://github.com/Sheraff/soft-serve-tunes/blob/main/src/components/ArtistList/index.tsx. And it's butter smooth even on a 90fps device.
The trick is to set
estimateSize to 0 for "the items that will not create a new row when added"
(in this example, it's a horizontal scroll, and it's 3x3, but I'm assuming the concept is similar enough)