mui
[DataGridPro] Add properties to lazy load row children
Part of #2994
Solutions
Add new props to the grid
Add two properties to lazy load the children of a row.
hasChildrenOnServer?: (row: GridRowModel) => boolean;
fetchRowChildren?: (row: GridRowModel) => Promise<GridRowModel[]>;
A simplified implementation would look something like:
const setRowChildrenExpansion = async (id, isExpanded) => {
const row = apiRef.current.getRow(id);
if (isExpanded && props.fetchRowChildren) {
const shouldFetch = prop.hasChildrenOnServer ? prop.hasChildrenOnServer(row) : true;
if (shouldFetch) {
const newRows = await prop.fetchRowChildren(row);
apiRef.current.updateRows(newRows);
}
}
// ... rest of the current behavior
}
We could add a loading animation to improve the UX.
Let user implement it
Let the user handle it with GridEvents.rowExpansionChange and just add an example to the doc.
It wont scale with future optimizations but could be enough for the time being.
https://codesandbox.io/s/datagridpro-v5-quick-start-forked-ncklk?file=/src/App.tsx
Technical evolution needed
Do not reset the whole state when adding new rows with updateRows
Whatever the solution we pick, we are limited by the fact the when we add a row, we re-generate the whole tree and therefore loose the expansion statuses.
A first important step would be to handle correctly partial tree updates.
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.
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.
In #4851 we are talking about modifications on the internal state structure to be able to do lazy loading properly.
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
@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.
Another vote for this feature. It's pretty fundamental if you are displaying hierarchical data.
@joserodolfofreitas Premium customer here. This would be a greatly appreciated feature.
Looking to switch from AG-Grid to Mui-Grid subscription, only critical missing feature is child lazy loading
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.
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.
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
Premium customer here. Waiting for the implementation of this feature.
+1 premium customer waiting on implementation of this feature... This is a breaking change blocking us from updating v5 to v6
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
Hi everyone, apologies for the delay on this one. There are a number of factors involved:
- Other high-priority features/priorities in the pipeline
- 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
+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).
+1 another premium customer who is working around this as is. Would really appreciate this going in!
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.
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?
