Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DataGridPro] Server side data source lazy loading #13878

Merged
merged 121 commits into from
Dec 2, 2024
Merged

[DataGridPro] Server side data source lazy loading #13878

merged 121 commits into from
Dec 2, 2024

Conversation

arminmeh
Copy link
Contributor

@arminmeh arminmeh commented Jul 18, 2024 •
edited
Loading

Part of #8179
Resolves #10857
Resolves #10858

Preview: https://deploy-preview-13878--material-ui-x.netlify.app/x/react-data-grid/server-side-data/lazy-loading/

Action items in progress:

  • Make initial end index dependent on the viewport Use page size for the initial data load
  • Refine/fix issues when rows positions are changed after
    • Sorting
    • Filtering
  • Handle empty data set
  • Update documentation and add more examples
  • Improve caching
  • Lazy loading in combination with grouped rows / tree grid (will be handled in [data grid] Implement server-side data source with nested data lazy loading #14527)
  • Throttling requests
    • With a fixed time
    • Configuration
  • Update premium grid to use new processors/hooks
  • Check if lazy loading can be combined with infinite loading
    • Support infinite loading
    • Support switching between viewport and infinite loading
  • Error handling
  • Tests
  • Add changelog

Changelog

@arminmeh arminmeh added component: data grid This is the name of the generic UI component, not the React module! feature: Server integration Better integration with backends, e.g. data source new feature New feature or request plan: Pro Impact at least one Pro user feature: Row loading Related to the data grid Row loading features labels Jul 18, 2024
@mui-bot
Copy link

mui-bot commented Jul 18, 2024 •
edited
Loading

Deploy preview: https://deploy-preview-13878--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 78cfc73

@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch from a16525b to 9302410 Compare July 22, 2024 09:22
@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch 2 times, most recently from 3e7e817 to f747d05 Compare August 6, 2024 07:45
@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch from 3d0de1a to 04bff9b Compare August 13, 2024 11:16
MBilalShafi
MBilalShafi reviewed Aug 13, 2024
View reviewed changes
Copy link
Member

@MBilalShafi MBilalShafi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really nice initial implementation 👍
Thank you for picking this up. 🙏

packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts Outdated Show resolved Hide resolved
packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts Outdated Show resolved Hide resolved
packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSource.ts Outdated Show resolved Hide resolved
@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch 2 times, most recently from 2aaa688 to 99cd596 Compare August 16, 2024 14:31
@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch 3 times, most recently from 9257ca3 to 5eefb3d Compare September 12, 2024 08:23
@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch from 6df3bb1 to eae88f2 Compare September 19, 2024 06:41
@MBilalShafi MBilalShafi mentioned this pull request Sep 19, 2024
Closed
@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch 2 times, most recently from fcecea3 to 9230211 Compare October 1, 2024 08:42
cherniavskii
cherniavskii reviewed Oct 2, 2024
View reviewed changes
Copy link
Member

@cherniavskii cherniavskii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job combining lazy and infinite loading and explaining this well in the docs!

docs/data/data-grid/server-side-data/ServerSideLazyLoadingModeUpdate.tsx Show resolved Hide resolved
docs/data/data-grid/server-side-data/lazy-loading.md Show resolved Hide resolved
@arminmeh arminmeh changed the title [WIP] [DataGridPro] Server side data source lazy loading [DataGridPro] Server side data source lazy loading Oct 3, 2024
@arminmeh arminmeh marked this pull request as ready for review October 3, 2024 08:15
@MBilalShafi MBilalShafi mentioned this pull request Oct 3, 2024
Open
@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch from f50f6de to 14cd89d Compare October 4, 2024 09:10
@michelengelen michelengelen mentioned this pull request Oct 8, 2024
Closed
1 task
arminmeh and others added 20 commits December 2, 2024 13:41
@arminmeh
Static row count for better UI
60621de
@arminmeh @MBilalShafi
Update cache manager description
580f59c 
Co-authored-by: Bilal Shafi <[email protected]>
Signed-off-by: Armin Mehinovic <[email protected]>
@arminmeh
Remove empty space
9c3bf3d
@arminmeh
Fix duplicate skeleton row key issue
490aa90
@arminmeh
Add unstable prefix to the lazyLoading flag
107563b
@arminmeh
Code cleanup
5a3bead
@arminmeh
Move chunk size calculation in lazyRef
3e53369
@arminmeh
Fix condition
cfcaf2c
@arminmeh
Revert pagination label updates
653665e
@arminmeh
Update test to reflect skeleton row index change
02e910f
@arminmeh
Fix rebase
c6e47f1
@arminmeh
make lazyLoadingRequestThrottleMs unstable
1309c7c
@arminmeh
Performance improvements
b5cd453
@arminmeh
Cleanup effects
19302ad
@arminmeh @mapache-salvaje
Update documentation
6425bf2 
Co-authored-by: Sycamore <[email protected]>
Signed-off-by: Armin Mehinovic <[email protected]>
@arminmeh
Additional fixes to the overview page
e233143
@arminmeh
Align info boxes for the mock function
b3dee7a
@arminmeh
Improve lazy loading docs
593c907
@arminmeh
Trigger build
6a96423
@arminmeh
Trigger build (again)
96063f0
@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch from c0fe72a to 96063f0 Compare December 2, 2024 12:41
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 2, 2024
mapache-salvaje
mapache-salvaje approved these changes Dec 2, 2024
View reviewed changes
Copy link
Contributor

@mapache-salvaje mapache-salvaje left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job on the docs @arminmeh !

@arminmeh arminmeh merged commit 659dc5f into mui:master Dec 2, 2024
18 checks passed
@arminmeh arminmeh deleted the server-side-data-source-lazy-loading branch December 2, 2024 18:40
arminmeh added a commit to arminmeh/mui-x that referenced this pull request Dec 2, 2024
@arminmeh @KenanYusuf
@MBilalShafi @mapache-salvaje
[DataGridPro] Server side data source lazy loading (mui#13878)
1c0dcf2 
Signed-off-by: Armin Mehinovic <[email protected]>
Co-authored-by: Kenan Yusuf <[email protected]>
Co-authored-by: Bilal Shafi <[email protected]>
Co-authored-by: Sycamore <[email protected]>
LukasTy pushed a commit to LukasTy/mui-x that referenced this pull request Dec 19, 2024
@arminmeh @KenanYusuf
@MBilalShafi @mapache-salvaje @LukasTy
[DataGridPro] Server side data source lazy loading (mui#13878)
3b60a5b 
Signed-off-by: Armin Mehinovic <[email protected]>
Co-authored-by: Kenan Yusuf <[email protected]>
Co-authored-by: Bilal Shafi <[email protected]>
Co-authored-by: Sycamore <[email protected]>
@tommy-wl
Copy link

@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

@arminmeh
Copy link
Contributor Author

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MBilalShafi MBilalShafi MBilalShafi approved these changes

@KenanYusuf KenanYusuf KenanYusuf left review comments

@Janpot Janpot Janpot left review comments

@mapache-salvaje mapache-salvaje mapache-salvaje approved these changes

@cherniavskii cherniavskii cherniavskii approved these changes

Assignees
No one assigned
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Row loading Related to the data grid Row loading features feature: Server integration Better integration with backends, e.g. data source new feature New feature or request plan: Pro Impact at least one Pro user
Projects
None yet
Milestone
No milestone
10 participants
@arminmeh @mui-bot @sandronominal @tommy-wl @Janpot @KenanYusuf @MBilalShafi @cherniavskii @mapache-salvaje @oliviertassinari