T
TanStack•17mo ago
like-gold

useWindowVirtualizer with dynamic row height

Hey, the company I work for is using react-virtualized for displaying rows (it's a video platform similar to Youtube). So image a long list of rows with video previews. Currently we are using WindowScroller from react-virtualized. I would like to replace react-virtualized with tanstack/react-virtual. I already started implementing the functionality but I'm having issues with using dynamic row height with useWindowVirtualizer. Is there a working example somewhere with this combination? I have only found one or another. If somebody has working example I'd be grateful.
2 Replies
conventional-tan
conventional-tan•17mo ago
HI, dynamic size is supported in same way, by adding on element 
 data-index={row.index}
 ref={virtualizer.measureElement}
 data-index={row.index}
 ref={virtualizer.measureElement}
in window case important is also scrollMargin that tels where the list starts in page
like-gold
like-goldOP•17mo ago
Oh.. I was missing the data-index, that was the issue why dynamic height wasn't working Thank you @piecyk 🙂

Did you find this page helpful?