[DataGridPro] Server side data source lazy loading
Part of https://github.com/mui/mui-x/issues/8179 Resolves https://github.com/mui/mui-x/issues/10857 Resolves https://github.com/mui/mui-x/issues/10858
Preview: https://deploy-preview-13878--material-ui-x.netlify.app/x/react-data-grid/server-side-data/lazy-loading/
Action items in progress:
- [x] ~~Make initial end index dependent on the viewport~~ Use page size for the initial data load
- [x] Refine/fix issues when rows positions are changed after
- [x] Sorting
- [x] Filtering
- [x] Handle empty data set
- [x] Update documentation and add more examples
- [x] ~~Include https://github.com/mui/mui-x/issues/14227~~ (will be handled separately)
- [x] Improve caching
- [x] Lazy loading in combination with grouped rows / tree grid (will be handled in https://github.com/mui/mui-x/issues/14527)
- [x] Throttling requests
- [x] With a fixed time
- [x] Configuration
- [x] Update premium grid to use new processors/hooks
- [x] Check if lazy loading can be combined with infinite loading
- [x] Support infinite loading
- [x] Support switching between viewport and infinite loading
- [x] Error handling
- [x] Tests
- [x] Add changelog
Changelog
- 💫 Support Server-side lazy loading on the Data Grid. Use data source to fetch a range of rows on demand and update the rows in the same way as described in Infinite loading and Lazy loading without the need to use any additional event listeners and callbacks.
Deploy preview: https://deploy-preview-13878--material-ui-x.netlify.app/
Updated pages:
- docs/data/data-grid/server-side-data/index.md
- docs/data/data-grid/server-side-data/lazy-loading.md
- docs/data/data-grid/server-side-data/tree-data.md
Generated by :no_entry_sign: dangerJS against 78cfc73e0924701b22e8fc757160b215491fe8ff
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
@samuelsycamore thanks for all the feedback.
I may not have caught every instance of the last two points so it might be worth double-checking on your own.
I have pushed some additional changes
@arminmeh great job 👍 I was wondering when do you plan to merge it ?
@sandronominal thanks 🙂 I am waiting for the final docs changes approval and then I will merge it. Expecting it to be in this week's release
This pull request has conflicts, please resolve those before we can evaluate the pull request.
@arminmeh seems like this is scheduled to be released as part of v8? Is it possible to have it ready to use in version 7.xx? (Would like to use this feature ASAP)
I am currently using data source for fetching data.
AFAIK, this way of lazy loading (https://mui.com/x/react-data-grid/row-updates/#lazy-loading) is not compatible with data source.
Premium customer - Support ID: 96081
@tommy-wl do you think that you can plan a migration to v8?
It should not be hard to do so This is the migration guide with the changes made so far https://github.com/mui/mui-x/blob/master/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md and the pending changes should also not make public API changes that are hard to adopt. You can check the list here https://github.com/mui/mui-x/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22breaking%20change%22%20label%3A%22component%3A%20data%20grid%22
Plan is to have the stable version 8 out somewhere in March. You can even start right now with the alpha version. Even though it is alpha, the API does not change dramatically from version to version