segmentio
Table.VirtualBody - allowAutoHeight - Layout and scrolling issues
The issues are reproducible on the Complete virtual example on https://evergreen.segment.com/components/table/ I know this is an experimental feature. It's failing in two scenarios:
- measuring row height in the first load
- scrolling after a jump to a distant position
Here the details:
Row height is not well measured
To reproduce it don't scroll the table, just check the height of the rows after the first load. Refresh the browser a few times until reproducing the issue.
Check the row 4 on the next image:
Check the row 1 on the next image:
Check the layout:
The issue is fixed after the affected rows are scrolled out of the viewport and then back to the viewport again.
Random scroll jump when scrolling over first viewed rows
To reproduce it don't scroll the table, use the scrollToIndex input to jump to any row out of the viewport, or drag and drop the lateral scroll bar to the middle of the table. Choose one direction, up or down, and just scroll slowly until notice a jump going back to the initial position.
Example using the input scrollToIndex:
Example using the scroll bar:
Example on the middle of the table:
This issue is not reproducible when scrolling normally from top to bottom using the trackpad or the mouse wheel.
I have tested on: MacBook Pro Chrome Version 75.0.3770.142 (Official Build) (64-bit)
same here, react-tiny-virtual-list say here https://github.com/clauderic/react-tiny-virtual-list#common-issues-with-purecomponent You can force it to re-render by calling forceUpdate on it or by passing it an extra prop that will change every time your data changes.
how can i forceUpdate Table.VirtualBody?
issue: first render - render table with initial data, second render - fetch data then render table
but some rows still same height as it was on first render...
