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

[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).

[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?

[github-actions]

⚠️ 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.

[KuberAroraVinove]

Hie @MBilalShafi , I'm using the unstable_dataSource for the tree structure its working on my local but when deploying it on server im getting data from the api but no rows showing in the tree. Same is workin in the local. Can you please help me out with why its not working when deployed over server.

[flaviendelangle]

Hi @KuberAroraVinove
Can you create a new issue, if possible with a reproduction case 🙏