KevinVandy/material-react-table

Virtualized rows are too slow in 'table' editing mode

githorse opened this issue · 7 comments

githorse commented

material-react-table version

v2.0.4

react & react-dom versions

v.18.2.0

Describe the bug and the steps to reproduce it

When using row virtualization on a large dataset, in 'table' editing mode, if I scroll quickly, the virtualization can't keep up and I see a blank screen for a few hundred milliseconds, up to a second or two (longer than I would consider acceptable in a production app).

Questions:

  • Can the table editing mode rendering be sped up in some way? (Guessing not.)
  • Could table editing mode be seamlessly toggled off during scrolling and then back on when scrolling stops? Seems like that might work.
  • If there's no possible way to avoid the problem, can we show a loading spinner (ideally, a customizable one) while this is happening? That's not ideal but it would definitely improve the user experience.

Minimal, Reproducible Example - (Optional, but Recommended)

see CodeSandbox example

Screenshots or Videos (Optional)

Screen.Recording.2023-12-01.at.08.12.37.mov

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.
KevinVandy commented

This is somewhat expected when mixing those features. Virtualization works best when there isn't a ton of heavy components in each cell constantly mounting and unmounting.

s-light commented

iam getting also a big lag / blank screen with

const table = useMaterialReactTable({
// ...
        enableEditing: true,
        editDisplayMode: "cell",
        enableRowVirtualization: true,
// ...
}
2023-12-20.01-14-27.mp4
dangkhoa99 commented

@s-light I tested it on Firefox, Safari, Edge, Chrome. Edge, Chrome works fine. I recommend to you use Chrome/Edge browser for better experience.

s-light commented

thanks @dangkhoa99 for testing.
chrome/edge is no option for our clients...
and most of them will also have somewhat older & slower devices than i have for development 🙈

as githorse already mentioned:
for me it would be fully fine if i can show a loading indicator of some sort..
are there any events i can react on?!

Virtualization works best when there isn't a ton of heavy components in each cell constantly mounting and unmounting.

@KevinVandy have you any tips for best practice to keep it fast?
i think - in my example with the edit editDisplayMode: "cell", it is first only rendering statics.
and only if i click in a cell it creates / mounts the edit component..
so that should not target the scrolling or otherwise rendering / update speed..?!

KevinVandy commented

I'm working on a new fixed row height opt-in virtualization mode for MRT that is going to have slightly higher performance, but requires all rows to have the same height without word wrap. That might help, but the real issue here is that MUI textfields are too bloated, and rendering over 50 of them on screen at once yields poor results.

  • 👍1
KevinVandy commented

Fixed height row virtualization mode is not coming any more right now. My attempts were too buggy.
There is a lot of hope with Material UI V6 coming out Q2 of 2024 though, which will get rid of runtime Emotion styling. That will honestly make a huge difference, and I've been really looking forward to it. It will probably be the most game changing think that has happened to MRT.
https://mui.com/blog/2023-material-ui-v6-and-beyond/

KevinVandy commented

If you want an idea of how much better Material React Table without Emotion runtime styles generating with virtualization will be, take a look at Mantine React Table v2. It just uses pure CSS now, and the virtualization performance is drastically better now.
https://v2.mantine-react-table.com/docs/examples/virtualized

  • 👍2
  • 🚀1