When using variable row heights, setting `scrollTop` doesn't work well. Fix proposed about fixed-data-table-2 HOT 4 CLOSED

Hi @pradeepnschrodinger,

My colleague Daniela has submitted the PR #701. We have implemented a cache logic. Now on every componentDidUpdate() a new loop for calculation IS NOT made, as in the initial commit. We are waiting for your feedback.

from fixed-data-table-2.

Hey @cristian-spiescu , thanks for filing this in a very detailed manner!
The context behind the issue, example/code changes, and screenshots have been very helpful 😄 .

FDT calculates row heights lazily, so the offsets for the currently visible rows at any given point of time will be inaccurate until all the row heights of the previous rows are calculated.
This was a design decision focusing around lazy loading data and maximising performance against huge:no of rows with moderate sacrifices to offset accuracy.

As you noted, this doesn't work out well when scrolling to an arbitrary offset and expecting it to match with other scrollable containers.

I think having some way to make FDT obey accurate offsets will be awesome.
Please put the PR in. We can continue the discssion there.

Some immediate questions for the PR:

• Could you test exactScrollTopInCaseOfVariableRowHeights with controlled scrolling?
  • Controlled scrolling is a typical use case in FDT where the scroll offsets are kept continously in sync with FDT via scroll handlers like onVerticalScroll (See AutoScroll example).
  • I expect FDT will preload the heights of all previous rows on EVERY render in this case.
  • This could be expensive for really large tables, especially if we need 60fps renders.
• Should we employ a cache (or something to skip previous fetches) for performance?
  • If we do, then we'll need to figure out how a user can invalidate the cache (i.e, update row heights later) ?
  • eg: react-window has a similar use case and their design is to expose an API method to let the user manually clear the cached size of a specific item, causing the container to rerender and refetch data after that item.

from fixed-data-table-2.

Nice, thanks! We'll checkout the PR with the devs sometime next week.

cc: @AmanGupta2708, @karry08, @abhisheksingh2410

from fixed-data-table-2.

Released the fix for this issue with v2.0.5 via #701.
cc: @daniela-mateescu, @cristian-spiescu, thanks for your contribution!

Summary:
The new optional table prop isVerticalScrollExact (defaulted as `false) can be turned on to use precise vertical scrolls in FDT.
This works by making FDT fetch row heights for ALL rows in the table.
There's also an internal cache so that FDT won't keep re-requesting all rows on every render.

Incase the cached row height needs to be reset, the new public API updateRowHeights(rowIndex) can be used to reset the row heights starting from rowIndex until the end of the table.

from fixed-data-table-2.