[data grid] Implement server-side data source in tree data

[flaviendelangle]

Part of #8179

This issue addresses the implementation of the server-side tree data in the Data Grid that comes under the umbrella of the data source.

The feature is available in the latest version of the Data Grid.

Check the official documentation here: https://mui.com/x/react-data-grid/server-side-data/tree-data/

[mbiggs-gresham]

I would love to see this feature implemented. We currently are doing an infinite scroll grid in the pro version and have just seen the addition of the tree data and was wondering how we could make the two work together.

Would you envision it would be possible to make it so that not ALL children have to be fetched on the expansion. We are likely to see some very large numbers of child rows (but only 1 level deep), so i'm just wondering if we could somehow make it so that we can retrieve the child rows as part of the infinite scroll.

[flaviendelangle]

The next release will add #3604 which will help lazy loading, I will add an example in the doc of what can be done in your applications without any big changes on our side.

But it will still have limitations. Infinite loading can't work right now outside of top level rows, so your use-case is probably not doable. @DanailH this is clearly something to have in mind when we will improve the infinite loading and infinite loading examples. You might be able to do some "hacky" things to make it work.

[flaviendelangle]

In #4851 we are talking about modifications on the internal state structure to be able to do lazy loading properly.

[Bindeep]

Is there any estimated time when this will be added?

[flaviendelangle]

We will need to make breaking changes to implement this one correctly So we need to wait for the next major (v6) I can't give an exact time, but Q4 2022 or Q1 2023 is likely

[bclements]

@joserodolfofreitas Premium customer here. We need the lazy loading functionality asap. Developing a new application so happy to utilize something that has a breaking change in it.

[dave-sinaitechnologies]

Another vote for this feature. It's pretty fundamental if you are displaying hierarchical data.

[toinhao1]

@joserodolfofreitas Premium customer here. This would be a greatly appreciated feature.

[nmuren]

@joserodolfofreitas Premium customer here. We would love to see this in Q2.

[dayrim]

Looking to switch from AG Grid to MUI X Grid subscription, the only critical missing feature is child lazy loading.

[joserodolfofreitas]

Hey everyone; we're starting to work on this feature. We've opened a discussion to nail the implementation details down.

Please feel free to join the conversation at https://github.com/mui/mui-x/discussions/9114 and share your feedback, use cases, and concerns.

[srgg]

With all the respect to the development team, lazy loading children for TreeGrid and usual Data grid as well as Pivot support? At least for me makes a big difference with AGGrid, since MUI + MUI X will provide way more than the 'Data Grid' feature.

And lazy loading by itself, hopefully, will allow usage of custom loaders per child, which means virtual children nodes. This will be an expectedly cool feature, though.

[MBilalShafi]

Hey @srgg

Thank you for the feedback. Could you expand more on what you mean by the custom loaders per child and what you want to achieve with them, does that mean the control to fetch differently based on the rowData of a specific tree parent?

Do you have an example use-case in mind where this could be useful?

Thanks

[Manisha11sep]

Premium customer here. Waiting for the implementation of this feature.

[Tucker-Gilligan]

+1 premium customer waiting on implementation of this feature... This is a breaking change blocking us from updating v5 to v6

[jonathaneemmett]

Another premium customer that could really use this feature.

[syrepol]

about 6 more premium customers are also waiting for this to be implemented

[david-ic3]

+3 pro customers waiting for this to be implemented

[gs250510]

+1 premium customer waiting for this to be implemented :shipit:

[jwilliams-ecometrica]

Would be really great to have this feature implemented :)

[nmuren]

This was marked Q2 at one time. Any idea when it will be released?

[Manisha11sep]

Hi @flaviendelangle Would you be able to provide some insights on the progress of this issue? I know you guys have a lot of feature requests to handle. However, having a timeline will help us create our v6 upgrade roadmap as lazy loading children row is a major feature on our application where we are only fetching new rows when the user is expanding the parent class row due to the number of rows

Any sort of update is helpful. Thank you so much

[MBilalShafi]

Hi everyone, apologies for the delay on this one. There are a number of factors involved:

1. Other high-priority features/priorities in the pipeline
2. Expansion of the scope of this feature to a broader concept (server-side data source) which will impact almost every feature related to server-side data fetching, the aim is to improve DX and make it simple to use server-side data with the data grid.

Can't say much about the delivery timeline, it had been one of the focus points in Q3 and we'll continue to focus on this in Q4 as well. I'm hopeful very soon there will be some considerable progress. 🤞

lazy loading children row is a major feature on our application

@Manisha11sep We have a way on our docs to implement this in userland, could that work for you meanwhile? Here's the documentation link: https://mui.com/x/react-data-grid/tree-data/#children-lazy-loading

[iOrcohen]

+1 for premium customer waiting for this. Tried the solution as described here - https://mui.com/x/react-data-grid/tree-data/#children-lazy-loading. But in real-life, every re-render of the datagrid component will reset the data in the table (since all the control is over the apiRef state and not through the rows props, which is empty array).

[omrilevi1994]

+1 for premium customer waiting for this

[heatherBoveri]

+1 another premium customer who is working around this as is. Would really appreciate this going in!

[peterazer90]

Pro customer, it's a very important property, because most of the use is calling API to get sub-rows. I'm waiting for it.

Thank You.

[heyfirst]

Pro customer here, +1 for this.

[fionaDawn]

Pro customer, +1 for this!

Tried the solution in https://mui.com/x/react-data-grid/tree-data/#children-lazy-loading but it doesn't work when paginationMode is set to server. updateRows function is adding the rows of the next pages instead of replacing all the rows.

Trying to add a workaround to this workaround which is to call updateRows only on handleExpansionChange, otherwise it calls setRows. Any other thoughts?

[kl-ang]

Pro users. +1, been waiting for this. I have tried implementing the way, but need to hack few things to make it works. Hopefully can get this soon.

[woigl]

+1

[mgprieto-soincon]

+1 pro customer. Hopefully can get this soon 🤞.

[quidl]

+1 pro customer

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.