bvaughn / react-window

React components for efficiently rendering large lists and tabular data
https://react-window.now.sh/
MIT License
15.92k stars 788 forks source link

react-window if provided itemCount as 5 mil only renders upto 1.6 million #780

Closed psurana-flextrade closed 1 month ago

psurana-flextrade commented 2 months ago

Hi,

thanks for creating react-window, i find it very good and alternative solution to react-virtualized rendering performance is better in react-window and its very optimized

thing is i have to show log lines in my project, log lines ranges from around 1mil to 10 mil when i tried the react-window Fixed or Variable list, it only renders upto 1677720

i have a created a sandbox environment to check

https://codesandbox.io/p/sandbox/epic-dream-3v89z5

am i missing something here?

shaadansari commented 2 months ago

Hi @psurana-flextrade it's a very interesting bug. I'm working on it.

shaadansari commented 2 months ago

Hi @psurana-flextrade , The issue you're experiencing where the last rendered

element appears at top: 3.35545e+07px (which is approximately 33,554,432 pixels) and no further rows are rendered afterward is related to the maximum scroll height limitation in browsers. Screenshot 2024-09-10 105753

shaadansari commented 2 months ago

if you reduce the item size to 10, the number of rendered items will double. There are no issues with React Window.

psurana-flextrade commented 2 months ago

hi @shaadansari thanks for looking into this one. I get it now due to browser limitation of height, we could not render more rows.

Maybe this can resolved using offset value, adding offset to index would definitely show all the rows

i have updated the codepen if anyone needs it https://codesandbox.io/p/sandbox/epic-dream-3v89z5

are you planning to introduce feature like maybe offset to support any number of rows for VariableSizeGrid?

EDIT: this currently works only for itemSize of 20

shaadansari commented 2 months ago

Hi, can you please explain the solution you mentioned? Yes, I'm interested in contributing a feature.