Virtual Rows Blink When Rows Have Varying Heights On Scroll

[scott-avery]

material-react-table version

0.33.6

Describe the bug and the steps to reproduce it

1. Open https://www.material-react-table.dev/?path=/story/features-virtualization--enable-row-virtualization
2. perform some scrolls on table.
3. glitches occur.

Your Minimal, Reproducible Example - Sandbox (Recommended) or code snippets

https://www.material-react-table.dev/?path=/story/features-virtualization--enable-row-virtualization

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

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

[KevinVandy]

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.

[scott-avery]

@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.

[KevinVandy]

@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.

[scott-avery]

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

[KevinVandy]

@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.

[e-cloud]

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

[KevinVandy]

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.

[scott-avery]

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

[AndreyGrek]

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:

https://user-images.githubusercontent.com/42175541/192102312-932c00fa-82e3-4d9d-82df-36a638832374.mov

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 :(

[KevinVandy]

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

[AndreyGrek]

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

[KevinVandy]

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

[KevinVandy]

@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