Skip to content

[DataGrid] Format pagination numbers by default#21117

Merged
siriwatknp merged 16 commits intomui:masterfrom
siriwatknp:fix/format-pagination
Mar 2, 2026
Merged

[DataGrid] Format pagination numbers by default#21117
siriwatknp merged 16 commits intomui:masterfrom
siriwatknp:fix/format-pagination

Conversation

@siriwatknp
Copy link
Copy Markdown
Member

@siriwatknp siriwatknp commented Jan 28, 2026

closes #13222

Breaking Change

The pagination is formatted by default.

Before:

Screenshot 2024-05-23 at 14 58 46

After:

Screenshot 2024-05-23 at 15 05 47

Message to be added to the migration docs:

"To disable the pagination formatting, provide this locale text key:"

<DataGrid
  localeText={{
    paginationDisplayedRows: ({ from, to, count, estimated }) => {
      if (!estimated) {
        return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
      }
      const estimatedLabel =
        estimated && estimated > to
          ? `around ${estimated}`
          : `more than ${to}`;
      return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
    }
  }}
/>

@siriwatknp siriwatknp added breaking change Introduces changes that are not backward compatible. v9.x scope: data grid Changes related to the data grid. labels Jan 28, 2026
@siriwatknp siriwatknp changed the title [DataGrid] [DataGrid] format pagination number by default Jan 28, 2026
@siriwatknp siriwatknp changed the title [DataGrid] format pagination number by default [DataGrid] format pagination numbers by default Jan 28, 2026
@mui-bot
Copy link
Copy Markdown

mui-bot commented Jan 28, 2026

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

  • Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

    [l10n] Improve Swedish (sv-SE) locale
    [l10n] Add Danish (da-DK) locale

  • Update the documentation of supported locales by running pnpm l10n
  • Clean files with pnpm prettier.

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

Updated pages:

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 🔺+283B(+0.07%) 🔺+90B(+0.07%)
@mui/x-data-grid-pro 🔺+283B(+0.06%) 🔺+108B(+0.07%)
@mui/x-data-grid-premium 🔺+283B(+0.04%) 🔺+79B(+0.04%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 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 43874fc

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 28, 2026
@github-actions
Copy link
Copy Markdown
Contributor

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

@MBilalShafi MBilalShafi changed the title [DataGrid] format pagination numbers by default [DataGrid] Format pagination numbers by default Jan 29, 2026
Copy link
Copy Markdown
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.

Let's start a Data Grid migration guide for v9 along with this PR?

@siriwatknp
Copy link
Copy Markdown
Member Author

Let's start a Data Grid migration guide for v9 along with this PR?

Sounds good.

@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 17, 2026
@siriwatknp siriwatknp added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Feb 18, 2026
@siriwatknp
Copy link
Copy Markdown
Member Author

@MBilalShafi This PR formats Arabic to this

image

Do you think this is acceptable?

@siriwatknp siriwatknp force-pushed the fix/format-pagination branch from f96943e to d7a7821 Compare February 18, 2026 04:55
@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 18, 2026
@github-actions
Copy link
Copy Markdown
Contributor

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

Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 19, 2026
@MBilalShafi
Copy link
Copy Markdown
Member

MBilalShafi commented Mar 2, 2026

@MBilalShafi This PR formats Arabic to this
image

Do you think this is acceptable?

Yes, I think it's even better, it's now formatting the numbers into proper Arabic numerals for the ranges.

It'd be great however to also format the row per page value into Arabic numerals.

@siriwatknp siriwatknp merged commit bd5f2a4 into mui:master Mar 2, 2026
21 checks passed
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. 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. v9.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[data grid] Format row count numbers in pagination

4 participants