KevinVandy / material-react-table

A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
https://material-react-table.com
MIT License
1.5k stars 433 forks source link

`getSubRows()` should be lazy #893

Closed githorse closed 9 months ago

githorse commented 9 months ago

material-react-table version

v2.1.0

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

When manually defining getSubRows, I expected this function to be called as needed, dynamically, when I click expand a row in the grid. Instead, it's called up front for every level of aggregation, all the way down, on every row. That's a huge and unnecessary performance hit -- the vast majority of levels will never be expanded (in my use case, at least) and there's no need to calculate them up front.

Contrast this with, for example, AG Grid's server-side row grouping, which requests new rows as needed to expand the grid. (In my case, I'm not actually doing that expansion on the server, but calculating the rows from the raw data on the client side, along the lines of their example.)

I'm not sure if this issue is in MRT or the underlying Tanstack Table, but it makes MRT a non-starter for my large dataset. Can MRT be updated to call getSubRows dynamically to improve performance?

Note that I don't fully understand the manual grouping / aggregation feature, so I may be misunderstanding something here.

Minimal, Reproducible Example - (Optional, but Recommended)

Code Sandbox example

Screenshots or Videos (Optional)

No response

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

No, because I do not know how

Terms

KevinVandy commented 9 months ago

Sub rows can still be lazy, but the getSubRows function itself cannot. I'll have to write more about this later when I have time.

KevinVandy commented 9 months ago

There is now an official lazy sub-rows example - https://www.material-react-table.com/docs/examples/lazy-sub-rows

Also some official docs discussing the main concept for how to do it: https://www.material-react-table.com/docs/guides/expanding-sub-rows#lazy-load-sub-rows