Skip to content

[docs][DataGrid] Add pagination number formatting doc with a demo #19221

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
Merged
merged 11 commits into from
Aug 25, 2025
Merged

[docs][DataGrid] Add pagination number formatting doc with a demo #19221

merged 11 commits into from
Aug 25, 2025

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Aug 18, 2025 •
edited
Loading

@siriwatknp siriwatknp added docs Improvements or additions to the documentation. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Aug 18, 2025
@mui-bot
Copy link

mui-bot commented Aug 18, 2025 •
edited
Loading

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

Updated pages:

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against c6afa37

siriwatknp
siriwatknp commented Aug 18, 2025
View reviewed changes
michelengelen
michelengelen approved these changes Aug 18, 2025
View reviewed changes
Copy link
Member

@michelengelen michelengelen left a comment

Choose a reason for hiding this comment

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

LGTM

MBilalShafi
MBilalShafi approved these changes Aug 18, 2025
View reviewed changes
oliviertassinari
oliviertassinari reviewed Aug 18, 2025
View reviewed changes
docs/data/data-grid/localization/localization.md Outdated
To format large numbers in the pagination component, customize the `paginationDisplayedRows` with the following code:

```jsx
import { DataGridPro } from '@mui/x-data-grid-pro';
Copy link
Member

@oliviertassinari oliviertassinari Aug 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

We must always use the version that matches the docs context when we can, by default MIT.

Suggested change
import { DataGridPro } from '@mui/x-data-grid-pro';
import { DataGrid } from '@mui/x-data-grid';

Copy link
Member Author

Choose a reason for hiding this comment

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

The DataGrid won't work in this case because the pagination is not allowed to be more than 100.

Copy link
Member Author

Choose a reason for hiding this comment

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

I will add this info at the beginning of the section

Copy link
Member

@oliviertassinari oliviertassinari Aug 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

The DataGrid won't work in this case because the pagination is not allowed to be more than 100.

This would be news for me. People can paginate without limits in the MIT version. Let's remove the Pro component usage.

Copy link
Member Author

Choose a reason for hiding this comment

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

Please take a look at this https://stackblitz.com/edit/3cvdpmsl?file=src%2FDemo.tsx

image

Copy link
Member Author

Choose a reason for hiding this comment

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

@michelengelen just want to confirm with you before merging this PR. Do you think it make sense for this section to target DataGrid Pro and above (given the error from the image above)?

Copy link
Member

Choose a reason for hiding this comment

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

It would make sense, yes, but... we do support more than 100 rows in the MIT data grid. This change would then not apply to the pageSize, but rather the currently viewed range of rows and the total rows:

Screenshot 2025-08-21 at 13 50 21

Copy link
Member Author

Choose a reason for hiding this comment

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

Then I think it's better to switch to the community version. Let me update the demo.

siriwatknp
siriwatknp commented Aug 21, 2025
View reviewed changes
@MBilalShafi MBilalShafi added the scope: data grid Changes related to the data grid. label Aug 21, 2025
MBilalShafi
MBilalShafi requested changes Aug 21, 2025
View reviewed changes
@oliviertassinari oliviertassinari added the i18n Internationalization. The infrastructure used by localization. label Aug 21, 2025
@siriwatknp siriwatknp requested a review from MBilalShafi August 25, 2025 02:43
MBilalShafi
MBilalShafi approved these changes Aug 25, 2025
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.

Thank you for the recipe. Looks really nice. 🙌

@siriwatknp siriwatknp enabled auto-merge (squash) August 25, 2025 07:01
@siriwatknp siriwatknp added docs Improvements or additions to the documentation. and removed docs Improvements or additions to the documentation. labels Aug 25, 2025
@siriwatknp siriwatknp merged commit e25895d into mui:master Aug 25, 2025
23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari left review comments

@michelengelen michelengelen michelengelen approved these changes

@MBilalShafi MBilalShafi MBilalShafi approved these changes

@mj12albert mj12albert Awaiting requested review from mj12albert

Assignees
No one assigned
Labels
docs Improvements or additions to the documentation. i18n Internationalization. The infrastructure used by localization. scope: data grid Changes related to the data grid. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@siriwatknp @mui-bot @oliviertassinari @MBilalShafi @michelengelen