[TablePagination] Format pagination numbers according to locale#47803
Merged
siriwatknp merged 12 commits intomui:masterfrom Mar 13, 2026
Merged
[TablePagination] Format pagination numbers according to locale#47803siriwatknp merged 12 commits intomui:masterfrom
siriwatknp merged 12 commits intomui:masterfrom
Conversation
Use Intl.NumberFormat to format from/to/count in labelDisplayedRows so large numbers display with locale-appropriate separators (e.g. 103,177 for en-US, 103.177 for de-DE).
Netlify deploy previewBundle size report
|
siriwatknp
added
breaking change
github-actions
bot
added
the
PR: out-of-date
Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
github-actions
bot
added
PR: out-of-date
Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
github-actions
bot
removed
the
PR: out-of-date
mj12albert
reviewed
Mar 3, 2026
| "labelDisplayedRows": { | ||
| "type": { "name": "func" }, | ||
| "default": "function defaultLabelDisplayedRows({ from, to, count }) {\n return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;\n}" | ||
| "default": "function defaultLabelDisplayedRows({ from, to, count }) {\n return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;\n}" |
Member
There was a problem hiding this comment.
small nit: if you're reading this doc on the website, this formatNumber looks a bit out of place, but probably not a big deal
Member
Author
There was a problem hiding this comment.
It's constrain by the api docs script, I don't think we should do it in this PR.
Member
ZeeshanTamboli
left a comment
ZeeshanTamboli
left a comment
There was a problem hiding this comment.
Can we also add a test?
silviuaavram
approved these changes
Mar 10, 2026
silviuaavram
approved these changes
Mar 10, 2026
Member
silviuaavram
left a comment
silviuaavram
left a comment
There was a problem hiding this comment.
LGTM with @ZeeshanTamboli comments addressed
Member
|
Also, is this ticket is not in our V9 board? |
Member
Author
Added |
github-project-automation
bot
moved this from In progress
to Done
in Material UI public roadmap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #24495
BREAKING CHANGES
TablePagination numbers are formatted by default.
Why
Follow the same approach as MUI X mui/mui-x#13222
Summary
TablePaginationusingIntl.NumberFormatso large numbers display with locale-appropriate separatorsbuildFormatNumberutility that creates a locale-bound number formatterdefaultLabelDisplayedRowsinTablePagination(en-US) and all 53 active locale filesBefore:
103177After:
103,177(en-US),103.177(de-DE), etc.Similar to mui/mui-x#21117 for Data Grid.
Test plan
countvalues