Skip to content

[TablePagination] Format pagination numbers according to locale#47803

Open
siriwatknp wants to merge 6 commits intomui:masterfrom
siriwatknp:pagination-format
Open

[TablePagination] Format pagination numbers according to locale#47803
siriwatknp wants to merge 6 commits intomui:masterfrom
siriwatknp:pagination-format

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Feb 18, 2026

Closes #24495

BREAKING CHANGES

TablePagination numbers are formatted by default.

Why

Follow the same approach as MUI X mui/mui-x#13222

Summary

  • Format pagination numbers in TablePagination using Intl.NumberFormat so large numbers display with locale-appropriate separators
  • Add buildFormatNumber utility that creates a locale-bound number formatter
  • Apply formatting to defaultLabelDisplayedRows in TablePagination (en-US) and all 53 active locale files

Before: 103177
After: 103,177 (en-US), 103.177 (de-DE), etc.

Similar to mui/mui-x#21117 for Data Grid.

Test plan

  • TypeScript compiles without errors
  • Existing TablePagination tests pass (72 tests)
  • Verify formatted output with large count values
  • Verify RTL locales (ar-EG, he-IL, etc.) render correctly

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).
@mui-bot
Copy link

mui-bot commented Feb 18, 2026

Netlify deploy preview

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+263B(+0.05%) 🔺+108B(+0.07%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 6a87fe5

@siriwatknp siriwatknp added breaking change Introduces changes that are not backward compatible. component: TablePagination The React component. v9.x 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 Feb 18, 2026
@siriwatknp siriwatknp added this to the Material UI v9 (draft) milestone Feb 18, 2026
@zannager zannager added the scope: pagination Changes related to the pagination. label Feb 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change Introduces changes that are not backward compatible. component: TablePagination The React component. scope: pagination Changes related to the pagination. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. v9.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[i18n] Format numbers according to locale

3 participants

Comments