KevinVandy/material-react-table

Virtualization is not working properly even on the documentation page!

Closed this issue · 5 comments

material-react-table version

v2.12.1

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

Hi,

I have a very serious problem with row virtualization. In my code I have enabled virtualization on the principle of

enableRowVirtualization: true,

additionally I have the options set to overscan:

rowVirtualizerOptions: {
    overscan: 10
},

There is an identical problem in my table and in the documentation table example(https://www.material-react-table.com/docs/guides/virtualization).
As you can see when the browser window is enabled with devtools but with the option for responsiveness turned off, you can feel the lag when scrolling.
What I also noticed in my table as well as in the table in the documentation virtualization I have it doesn't work at all!
Please note that during fast scrolling you can not see the elements are being rendered at all, it looks as if the table loads all available data at the start.
When you turn on devtools and window responsiveness options you can see that during fast scrolling the elements are reloaded. There is no problem with lagging, because it loads as many elements as the user sees on the screen + additionally as many as is set in the "overscan" option. I have no idea what could be the problem.
I tried to disable all possible options I had in the table and leave only virtualization and sorting.

The same thing happens every time. I tested it on 3 laptops.

  1. win 10/opera + brave
  2. win 11/opera + brave
  3. linux/ brave

The same thing happens on each of these devices. I would be very grateful for a quick answer and for solving this problem as soon as possible.

Minimal, Reproducible Example - (Optional, but Recommended)

https://www.material-react-table.com/docs/guides/virtualization

Screenshots or Videos (Optional)

Doc table:

Doctable.mp4

My table:

Mytable.mp4

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

No, because I do not know how

Terms

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

This is pretty normal. There will be performance improvements when Material UI v6 is released

But why virtualization which is from @tanstack/react-virtual is not working properly it has only to do with material UI?

https://www.mantine-react-table.com/docs/examples/virtualized

The same thing happens on the table from mantine. Without responsiveness enabled in devtools you don't feel the lag as much, but when you fire up the responsiveness options you can even see the difference in the mantine table. Also, isn't there a bug with the virtualization itself?

Look at the v2 Mantine MRT virtualization and you should see performance increases. It depends on the browser and os. For example, on Mac, the current virtualization performance is actually really good. Always working on improvements though.

Then what is the reason that when I turn on devtools and click the screen responsiveness options and set even the same resolution as I would have by default, for example, 1920x1080, the table does not stutter at all when scrolling? Does the responsiveness option in devtools somehow render react applications differently, or is it something else?