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

Open
wants to merge 120 commits into
base: master
Choose a base branch
from
Open

[DataGridPro] Server side data source lazy loading #13878

wants to merge 120 commits into from
+2,314 −191

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 c0fe72a

@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 29 commits November 29, 2024 13:28
@arminmeh
Do not clear existing row count if the new response does not have a n…
1008adb 
…ew row count
@arminmeh
Align wording
54a9fa3
@arminmeh
Revert deprecations. They will be handled in a separate PR
313b141
@arminmeh
Performance improvements
c963ef8
@arminmeh @MBilalShafi
Update docs
7459571 
Co-authored-by: Bilal Shafi <[email protected]>
Signed-off-by: Armin Mehinovic <[email protected]>
@arminmeh @MBilalShafi
Code cleanup
23e5a93 
Co-authored-by: Bilal Shafi <[email protected]>
Signed-off-by: Armin Mehinovic <[email protected]>
@arminmeh
Request identifier as a number
ac68908
@arminmeh
More code cleanup
0a77d6e
@arminmeh
Fix build issue
a002399
@arminmeh
Static row count for better UI
2b9f840
@arminmeh @MBilalShafi
Update cache manager description
ae3c12b 
Co-authored-by: Bilal Shafi <[email protected]>
Signed-off-by: Armin Mehinovic <[email protected]>
@arminmeh
Remove empty space
61bef5b
@arminmeh
Fix duplicate skeleton row key issue
20a6e76
@arminmeh
Add unstable prefix to the lazyLoading flag
c98a2b1
@arminmeh
Code cleanup
8f2a315
@arminmeh
Move chunk size calculation in lazyRef
cb80845
@arminmeh
Fix condition
4c6f21d
@arminmeh
Revert pagination label updates
63905c9
@arminmeh
Update test to reflect skeleton row index change
388d0c0
@arminmeh
Fix rebase
f265243
@arminmeh
make lazyLoadingRequestThrottleMs unstable
2295180
@arminmeh
Performance improvements
b3f819c
@arminmeh
Cleanup effects
4fa4443
@arminmeh @samuelsycamore
Update documentation
ef1c3c9 
Co-authored-by: Sycamore <[email protected]>
Signed-off-by: Armin Mehinovic <[email protected]>
@arminmeh
Additional fixes to the overview page
8dc3df1
@arminmeh
Align info boxes for the mock function
b4d0f2e
@arminmeh
Improve lazy loading docs
03188e2
@arminmeh
Trigger build
9a053c0
@arminmeh
Trigger build (again)
c0fe72a
@arminmeh arminmeh force-pushed the server-side-data-source-lazy-loading branch from 74fe267 to c0fe72a Compare November 29, 2024 12:28
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

@cherniavskii cherniavskii cherniavskii approved these changes

@samuelsycamore samuelsycamore Awaiting requested review from samuelsycamore

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
8 participants
@arminmeh @mui-bot @Janpot @KenanYusuf @MBilalShafi @cherniavskii @samuelsycamore @oliviertassinari