React Virtualized Window Scroller not rendering new rows
See original GitHub issueI’m trying to follow the example for the window scroller in react virualized but can’t seem to get any new rows to render (See example).
Here’s the code I wrote:
const Row = ({ index, isScrolling, isVisible, key, style }) => {
console.log(`Rendering row ${index}`);
return tracks[index] ? (
<TrackItem
key={key}
id={tracks[index].id}
title={tracks[index].title}
artist={tracks[index].artist}
album={tracks[index].album}
explicit={tracks[index].explicit}
albumArtKey={tracks[index].albumArtUrl}
trackKey={tracks[index].trackUrl}
style={style}
/>
) : (
<></>
);
};
return (
<div className="bg-white h-library-full-height">
<Header trackCount={tracks.length} />
<WindowScroller ref={windowScrollerRef}>
{({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
<div className="flex-auto">
<AutoSizer disableHeight>
{({ width }) => (
<div ref={registerChild}>
<List
className="outline-none"
ref={listRef}
autoHeight
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
overscanRowCount={5}
rowCount={tracks.length}
rowHeight={48}
rowRenderer={Row}
scrollToIndex={scrollToIndex}
scrollTop={scrollTop}
width={width}
/>
</div>
)}
</AutoSizer>
</div>
)}
</WindowScroller>
</div>
);
For whatever reason the example doesn’t seem to work in my app. It does however work when I use an AutoSizer without the WindowScroller attached. Struggling to see the issue here.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:5
Top Results From Across the Web
React Virtualized Window Scroller not rendering new rows
I'm trying to follow the example for the window scroller in react virualized but can't seem to get any new rows to render...
Read more >bvaughn/react-virtualized - Gitter
Hi, I am using react-virtualized table for rendering large list. Is there a way to edit and save the row/multiple rows? @bvaughn any...
Read more >react-virtualized
Adjust its configurable properties below to see how it reacts. Use dynamic row heights? Show scrolling placeholder? Num rows. Scroll to.
Read more >Rendering long lists using virtualization with React
If we render a large list, the user does not see all its contents at once and uses a scrollbar. When we implement...
Read more >How To Render Your Lists Faster With React Virtualization
We might be unable to see all tweets in under a minute before the data changes. Not only that, as rendering DOM elements...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I was struggling with the same issue a few days earlier. I also patterned my component to the WindowScroller, AutoSizer, and List example. What fixed it for me was assigning a ref to the parent container of the
WindowScroller
and using it as thescrollElement
like so:EDIT: I also didn’t pass the
onScroll={onChildScroll}
prop to<List />
I’m using
react: 17.0.1
,react-virtualized: 9.22.3