Virtual Rows Blink When Rows Have Varying Heights On Scroll about material-react-table HOT 14 CLOSED

I think I could reproduce it too. Easily with large row size.

from material-react-table.

But as I understand it, as the components in the table increase, the lags will reappear. Memo in virtualized table does not help :(

That's kind of the nature of the beast. The more features you enable, and the more rows and columns you render at once, the lower the performance will be. I recommend using pagination in those instances.

It does appear that virtualization and row expansion don't play well together. Makes sense as any row height variation seems to confuse react-virtual

from material-react-table.

@AndreyGrek @scott-avery @e-cloud For those of you still using this library, v1.4.0 now has addressed the major problems here. This should be fixed

from material-react-table.

I'm exploring if I need to roll back to a previous beta version of @tanstack/react-virtual or even back to react-virtual v2 which did not have this problem

from material-react-table.

as of v0.34.0, it has been rolled back to react-virtual v2.10.4 where the problem does not appear to exist. Something is off with the estimateSize or scrolling ref logic in v3.

from material-react-table.

@KevinVandy I am afraid that issue still exists after rollback. Scroll more and you will find some rows flickering.

Both from online storybook and my local clone storybook.

My browser version is Chrome 104.0.5112.81.

from material-react-table.

@KevinVandy I am afraid that issue still exists after rollback. Scroll more and you will find some rows flickering.

Both from online storybook and my local clone storybook.

My browser version is Chrome 104.0.5112.81.

By flickering do you mean that it takes a second for the new rows to fully render in? Or are you still seeing large up and down vibrations that never stop?

There might always be some delay in the rows rendering. The uncontrolled infinite bouncing up and down is what I'm hoping is solved now.

from material-react-table.

@KevinVandy it's about the vibrations. It might be some calculation edge case in that library.

from material-react-table.

@scott-avery I've tried to find the problem on v0.36.0 on a Mac, Windows PC, and Android phone, and don't see the vertical vibrations anymore on my storybook or docs site. I can re-open if it is confirmed to still be happening though.

More work in general is needed for virtualization performance. Really want to be able to use @tanstack/react-virtual v3 once this is figured out.

from material-react-table.

Tried for hours to improve this, but it seems to be a flaw with react-virtual where when rows are differing heights are scrolled into and out of view at the same time cause this jitter. Slight improvements have been made by using some measureRefs internally, but the main fix is to ensure all rows have the same height. Setting a compact density state is one way to do that, since it sets whitespace: nowrap; internally on table cells.

from material-react-table.

good job. I will also investigate how to improve it later.

from material-react-table.

Good afternoon!
Faced the same problem that lines "dance". But we also got lags when adding components, for example:

• added enableExpanding
• added export with checkboxes
  As I understand it, there is a constant rerender when scrolling and, accordingly, the more components, the more lags. Video with profiler enabled:

We managed to partially fix the lags by reducing the overscan:

But as I understand it, as the components in the table increase, the lags will reappear. Memo in virtualized table does not help :(

from material-react-table.

It's so sad. But I'll still look for a solution, if I write something here or expose it to you PR

from material-react-table.

Good News. This will be fixed in v1.4. Thanks in part to @AndreyGrek 's PR.

from material-react-table.