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.

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

[DataGrid] Support advanced server-side pagination use cases #12474

Merged
merged 32 commits into from
Apr 18, 2024

Conversation

MBilalShafi
Copy link
Member

@MBilalShafi MBilalShafi commented Mar 18, 2024

Extracted from #12317
Resolves #409
Partially implements #2843
Fixes #4323

Preview: https://deploy-preview-12474--material-ui-x.netlify.app/x/react-data-grid/pagination/#index-based-pagination

Changelog

  • Support for unknown and estimated row count in server-side pagination is added

@MBilalShafi MBilalShafi added component: data grid This is the name of the generic UI component, not the React module! feature: Pagination Related to the data grid Pagination feature enhancement This is not a bug, nor a new feature feature: Server integration Better integration with backends, e.g. data source labels Mar 18, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 19, 2024

This comment was marked as outdated.

@MBilalShafi MBilalShafi changed the base branch from next to master March 21, 2024 02:15
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 21, 2024
@mui-bot
Copy link

mui-bot commented Mar 21, 2024

@MBilalShafi MBilalShafi marked this pull request as ready for review March 21, 2024 11:50

This comment was marked as outdated.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 29, 2024
@cherniavskii cherniavskii self-requested a review April 12, 2024 11:24
MBilalShafi and others added 4 commits April 15, 2024 23:28
Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
Signed-off-by: Bilal Shafi <bilalshafidev@gmail.com>
if (!estimated) {
return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
}
return `${from}–${to} of ${count !== -1 ? count : `more than ${estimated > to ? estimated : to}`}`;
Copy link
Member

Choose a reason for hiding this comment

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

Would it work if instead of wrapping we pass different to value depending on situation?
to: estimated > to ? estimated : to

Copy link
Member Author

@MBilalShafi MBilalShafi Apr 17, 2024

Choose a reason for hiding this comment

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

To achieve something like this, we need at least 3 values, from, to, and estimated, since all of them are different. If we instead try to conditionally pass the value of count it will be trickier to show the text more than.
image

Does it make sense?

Copy link
Member

Choose a reason for hiding this comment

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

Oh, got it.
In that case how about we fork TablePagination translations and move them to our locales? Then we can adapt labelDisplayedRows to work with every locale.
What do you think?

Copy link
Member Author

@MBilalShafi MBilalShafi Apr 17, 2024

Choose a reason for hiding this comment

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

That's an interesting point.

I initially thought a bit further. i.e. forking the whole TablePagination component on our side instead of translations only.
But there were a few reasons why I decided not to go with that approach at that point.

  1. The proper fix would be to do that on the core side since the component belongs in the core. If we move it to the X side, we may miss future updates on the core side (same with the translations)
  2. The estimated row count use case doesn't target a huge number of users, we did have a few requests for its support but I doubt that it will be demanded soon by many users, so is the effort even worth it?

I concluded that wrapping could be a nice middle ground. Meanwhile, we could add this functionality on the core side as Flavien suggested, and when after a major release, we bump the peer dependency on the core we remove this workaround.

Another side of the coin is the material-less grid which we are working on. That makes the argument of completely moving the component (TablePagination) on the Grid side a bit stronger, but again there comes a discussion about the implementation strategy of the material-less version since we haven't yet figured out how the isolation between material and material-less versions will work. CC @romgrk (Correct me if I am wrong)

Anyhow, if it looks OK to you, we can proceed with the current workaround for now and settle on something better later?

Copy link
Member

Choose a reason for hiding this comment

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

we could add this functionality on the core side as Flavien #12474 (comment), and when after a major release, we bump the peer dependency on the core we remove this workaround.

This sounds good to me. I'm not sure bumping the peer dependency on the core is a good idea though, since it would force users to upgrade even if they don't need this. Perhaps a better option would be showing a warning in the docs with the minimum supported version of @mui/material required for this to work.

Copy link
Member

Choose a reason for hiding this comment

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

I'm not sure bumping the peer dependency on the core is a good idea though

My proposal is:

  1. To implement something on X that do not require bumping the peer dep
  2. To have the core support whatever we think is the best DX, if this best DX requires a change on the core
  3. To bump the peer dep on the next major (we will probably need it for other topics anyway)


const defaultLabelDisplayedRows: WrappedLabelDisplayedRows = ({ from, to, count, estimated }) => {
if (!estimated) {
return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
Copy link
Member

Choose a reason for hiding this comment

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

Shouldn't this sentence be in the localization?
Even if people can override it, that way people just have to pass there usual locale (which they probably already do) and they have a translated app.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, ideally estimated should be supported by the @mui/material/TablePagination (since that's where its localization is coming from). It would also mean a minimum peer dependency bump apart from adding the support in that component.
Until feasible, we can provide this workaround to our users to achieve the localization for the estimated row count use case. See the info callout just above this docs section.

Or your suggestion is more about moving localization for this function (labelDisplayedRows) to the Grid localization already?

Copy link
Member

Choose a reason for hiding this comment

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

I was thinking about the grid localization, but it's true that it could also belong to the TablePagination one...
IMHO if we plan to put it in TablePagination, then we could create the PR in the core repo to make sure that we have it for our next major.

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.

Final feedback on the docs mostly to follow our Writing style guide and make the docs more compact.

Thanks for working on it, it's a great addition to the server-side pagination! 🚀

docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
docs/data/data-grid/pagination/pagination.md Outdated Show resolved Hide resolved
MBilalShafi and others added 2 commits April 18, 2024 00:08
Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
Signed-off-by: Bilal Shafi <bilalshafidev@gmail.com>
@MBilalShafi MBilalShafi merged commit 70faafc into mui:master Apr 18, 2024
17 checks passed
DungTiger pushed a commit to DungTiger/mui-x that referenced this pull request Jul 23, 2024
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
@MBilalShafi MBilalShafi deleted the row-count-unknown-estimated branch November 26, 2024 15:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature feature: Pagination Related to the data grid Pagination feature feature: Server integration Better integration with backends, e.g. data source
Projects
None yet
5 participants