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] Tree data nested pagination demo #14777

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[DataGridPro] Tree data nested pagination demo #14777

wants to merge 1 commit into from
+599 −2

Conversation

MBilalShafi
Copy link
Member

@MBilalShafi MBilalShafi commented Sep 30, 2024 •
edited
Loading

Allows the pagination of any nested level of the tree data.
A possible solution for #14527 in the userland

https://deploy-preview-14777--material-ui-x.netlify.app/x/react-data-grid/server-side-data/tree-data/#nested-pagination

TODO

  • Refine behavior with filtering, sorting, etc.
  • Check if the cache could be integrated with it
  • Optional: Retain the paginationModel state for each nested level.
  • Optional: Retain unique filterModel and sortModel states for each nested level.

@MBilalShafi MBilalShafi added component: data grid This is the name of the generic UI component, not the React module! feature: Tree data Related to the data grid Tree data feature feature: Server integration Better integration with backends, e.g. data source recipe labels Sep 30, 2024
@mui-bot
Copy link

mui-bot commented Sep 30, 2024

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

Updated pages:

Generated by 🚫 dangerJS against f767c65

@KenanYusuf
Copy link
Member

Looking good, noticed one issue where top level items are temporarily nested under the newly expanded row whilst the children are loading:

image
image

MBilalShafi
MBilalShafi commented Oct 1, 2024
View reviewed changes
docs/data/data-grid/server-side-data/NestedPaginationGroupingCell.js

export const gridDataSourceStateSelector = (state) => state.dataSource;

export const gridDataSourceLoadingIdSelector = createSelectorV8(
Copy link
Member Author

Choose a reason for hiding this comment

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

Self note, export these selectors

@github-actions GitHub Actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
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 feature: Tree data Related to the data grid Tree data feature PR: out-of-date The pull request has merge conflicts and can't be merged recipe
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@MBilalShafi @mui-bot @KenanYusuf