Skip to content

[DataGridPro] Server side data source lazy loading#13878

Merged
arminmeh merged 121 commits intomui:masterfrom
arminmeh:server-side-data-source-lazy-loading
Dec 2, 2024
Merged

[DataGridPro] Server side data source lazy loading#13878
arminmeh merged 121 commits intomui:masterfrom
arminmeh:server-side-data-source-lazy-loading

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 scope: data grid Changes related to the data grid. feature: Server integration Better integration with backends, e.g. data source type: new feature Expand the scope of the product to solve a new problem. 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
Janpot
Janpot reviewed Aug 8, 2024
View reviewed changes
@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. 🙏

@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!

arminmeh
arminmeh commented Oct 2, 2024
View reviewed changes
@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 <bilalshafidev@gmail.com>
Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
@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 <71297412+samuelsycamore@users.noreply.github.com>
Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
@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
@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 <4390250+arminmeh@users.noreply.github.com>
Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com>
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 <4390250+arminmeh@users.noreply.github.com>
Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com>
@tommy-wl
Copy link

tommy-wl commented Jan 23, 2025

@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

arminmeh commented Jan 23, 2025

@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

@Janpot Janpot Janpot left review comments

@kenanyusuf kenanyusuf kenanyusuf left review comments

@MBilalShafi MBilalShafi MBilalShafi approved these changes

@cherniavskii cherniavskii cherniavskii approved these changes

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

Assignees

No one assigned

Labels

feature: Row loading Related to the data grid Row loading features feature: Server integration Better integration with backends, e.g. data source plan: Pro Impact at least one Pro user. scope: data grid Changes related to the data grid. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[data grid] Implement server-side data source in row infinite loading [data grid] Implement server-side data source in row lazy loading

10 participants

@arminmeh @mui-bot @sandronominal @tommy-wl @Janpot @kenanyusuf @MBilalShafi @cherniavskii @mapache-salvaje @oliviertassinari