[DataGrid] Format pagination numbers by default

docs/data/migration/migration-data-grid-v8/migration-data-grid-v8.md

@@ -0,0 +1,56 @@
+---
+title: Data Grid - Migration from v8 to v9
+productId: x-data-grid
+---
+
+# Migration from v8 to v9
+
+<p class="description">This guide describes the changes needed to migrate the Data Grid from v8 to v9.</p>
+
+## Introduction
+
+This is a reference guide for upgrading `@mui/x-data-grid` from v8 to v9.
+
+:::success
+This guide is also available in <a href="https://raw.githubusercontent.com/mui/mui-x/refs/heads/master/docs/data/migration/migration-data-grid-v8/migration-data-grid-v8.md" target="_blank">Markdown format</a> to be referenced by AI tools like Copilot or Cursor to help you with the migration.
+:::
+
+## Start using the new release
+
+In `package.json`, change the version of the Data Grid package to `next`.
+
+```diff
+-"@mui/x-data-grid": "^8.x.x",
++"@mui/x-data-grid": "next",
+
+-"@mui/x-data-grid-pro": "^8.x.x",
++"@mui/x-data-grid-pro": "next",
+
+-"@mui/x-data-grid-premium": "^8.x.x",
++"@mui/x-data-grid-premium": "next",
+```
+
+## Breaking changes
+
+### Behavioral changes
+
+- Pagination numbers are formatted by default.
+
+  To disable the pagination formatting, provide the key and value to `localeText` prop:
+
+  ```diff
+   <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}`;
+  +    }
+  +  }}
+   />
+  ```

docs/data/pages.ts

@@ -832,7 +832,7 @@ const pages: MuiPage[] = [
         pathname: '/x/migration-v9',
         subheader: 'Upgrade to v9',
         children: [
-          // { pathname: '/x/migration/migration-data-grid-v8', title: 'Breaking changes: Data Grid' },
+          { pathname: '/x/migration/migration-data-grid-v8', title: 'Breaking changes: Data Grid' },
           // {
           //   pathname: '/x/migration/migration-pickers-v8',
           //   title: 'Breaking changes: Date and Time Pickers',

docs/pages/x/migration/migration-data-grid-v8.js

@@ -0,0 +1,6 @@
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/migration/migration-data-grid-v8/migration-data-grid-v8.md?muiMarkdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}

packages/x-data-grid/src/constants/localeTextConstants.ts

@@ -1,4 +1,7 @@
 import type { GridLocaleText } from '../models/api/gridLocaleTextApi';
+import { buildLocaleFormat } from '../utils/getGridLocalization';
+
+const formatNumber = buildLocaleFormat('en-US');
 
 export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
   // Root
@@ -198,10 +201,13 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
   paginationDisplayedRows: ({ from, to, count, estimated }) => {
     const unknownRowCount = count == null || count === -1;
     if (!estimated) {
-      return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
+      return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
     }
-    const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-    return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
+    const estimatedLabel =
+      estimated && estimated > to
+        ? `around ${formatNumber(estimated)}`
+        : `more than ${formatNumber(to)}`;
+    return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`;
   },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/arSD.ts

@@ -1,5 +1,11 @@
 import type { GridLocaleText } from '../models/api/gridLocaleTextApi';
-import { getGridLocalization, type Localization } from '../utils/getGridLocalization';
+import {
+  getGridLocalization,
+  type Localization,
+  buildLocaleFormat,
+} from '../utils/getGridLocalization';
+
+const formatNumber = buildLocaleFormat('ar-SD');
 
 const arSDGrid: Partial<GridLocaleText> = {
   // Root
@@ -196,10 +202,13 @@ const arSDGrid: Partial<GridLocaleText> = {
   paginationRowsPerPage: 'عدد الصفوف في الصفحة:',
   paginationDisplayedRows: ({ from, to, count, estimated }) => {
     if (!estimated) {
-      return `\u200E${to}-${from}\u200E من ${count !== -1 ? count : `أكثر من ${to}`}`;
+      return `\u200E${formatNumber(to)}-${formatNumber(from)}\u200E من ${count !== -1 ? formatNumber(count) : `أكثر من ${formatNumber(to)}`}`;
     }
-    const estimatedLabel = estimated && estimated > to ? `حوالي ${estimated}` : `أكثر من ${to}`;
-    return `\u200E${to}-${from}\u200E من ${count !== -1 ? count : estimatedLabel}`;
+    const estimatedLabel =
+      estimated && estimated > to
+        ? `حوالي ${formatNumber(estimated)}`
+        : `أكثر من ${formatNumber(to)}`;
+    return `\u200E${formatNumber(to)}-${formatNumber(from)}\u200E من ${count !== -1 ? formatNumber(count) : estimatedLabel}`;
   },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/beBY.ts

@@ -233,10 +233,10 @@ const beBYGrid: Partial<GridLocaleText> = {
   // }) => {
   //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
+  //     return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
   //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
+  //   const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`;
+  //   return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`;
   // },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/bgBG.ts

@@ -202,10 +202,10 @@ const bgBGGrid: Partial<GridLocaleText> = {
   // }) => {
   //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
+  //     return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
   //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
+  //   const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`;
+  //   return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`;
   // },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/bnBD.ts

@@ -204,10 +204,10 @@ const bnBDGrid: Partial<GridLocaleText> = {
   // }) => {
   //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
+  //     return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
   //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
+  //   const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`;
+  //   return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`;
   // },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/caES.ts

@@ -1,5 +1,11 @@
 import type { GridLocaleText } from '../models/api/gridLocaleTextApi';
-import { getGridLocalization, type Localization } from '../utils/getGridLocalization';
+import {
+  getGridLocalization,
+  type Localization,
+  buildLocaleFormat,
+} from '../utils/getGridLocalization';
+
+const formatNumber = buildLocaleFormat('ca-ES');
 
 const caESGrid: Partial<GridLocaleText> = {
   // Root
@@ -198,11 +204,13 @@ const caESGrid: Partial<GridLocaleText> = {
   paginationRowsPerPage: 'Files per pàgina:',
   paginationDisplayedRows: ({ from, to, count, estimated }) => {
     if (!estimated) {
-      return `${from}–${to} de ${count !== -1 ? count : `més de ${to}`}`;
+      return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : `més de ${formatNumber(to)}`}`;
     }
     const estimatedLabel =
-      estimated && estimated > to ? `al voltant de ${estimated}` : `més de ${to}`;
-    return `${from}–${to} de ${count !== -1 ? count : estimatedLabel}`;
+      estimated && estimated > to
+        ? `al voltant de ${formatNumber(estimated)}`
+        : `més de ${formatNumber(to)}`;
+    return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : estimatedLabel}`;
   },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/csCZ.ts

@@ -1,5 +1,11 @@
 import type { GridLocaleText } from '../models/api/gridLocaleTextApi';
-import { getGridLocalization, type Localization } from '../utils/getGridLocalization';
+import {
+  getGridLocalization,
+  type Localization,
+  buildLocaleFormat,
+} from '../utils/getGridLocalization';
+
+const formatNumber = buildLocaleFormat('cs-CZ');
 
 const csCZGrid: Partial<GridLocaleText> = {
   // Root
@@ -224,11 +230,13 @@ const csCZGrid: Partial<GridLocaleText> = {
   paginationRowsPerPage: 'Řádků na stránce:',
   paginationDisplayedRows: ({ from, to, count, estimated }) => {
     if (!estimated) {
-      return `${from}–${to} z ${count !== -1 ? count : `více než ${to}`}`;
+      return `${formatNumber(from)}–${formatNumber(to)} z ${count !== -1 ? formatNumber(count) : `více než ${formatNumber(to)}`}`;
     }
     const estimatedLabel =
-      estimated && estimated > to ? `přibližně ${estimated}` : `více než ${to}`;
-    return `${from}–${to} z ${count !== -1 ? count : estimatedLabel}`;
+      estimated && estimated > to
+        ? `přibližně ${formatNumber(estimated)}`
+        : `více než ${formatNumber(to)}`;
+    return `${formatNumber(from)}–${formatNumber(to)} z ${count !== -1 ? formatNumber(count) : estimatedLabel}`;
   },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/daDK.ts

@@ -202,10 +202,10 @@ const daDKGrid: Partial<GridLocaleText> = {
   // }) => {
   //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
+  //     return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
   //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
+  //   const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`;
+  //   return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`;
   // },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/deDE.ts

@@ -1,5 +1,11 @@
 import type { GridLocaleText } from '../models/api/gridLocaleTextApi';
-import { getGridLocalization, type Localization } from '../utils/getGridLocalization';
+import {
+  getGridLocalization,
+  type Localization,
+  buildLocaleFormat,
+} from '../utils/getGridLocalization';
+
+const formatNumber = buildLocaleFormat('de-DE');
 
 const deDEGrid: Partial<GridLocaleText> = {
   // Root
@@ -199,10 +205,13 @@ const deDEGrid: Partial<GridLocaleText> = {
   paginationRowsPerPage: 'Zeilen pro Seite:',
   paginationDisplayedRows: ({ from, to, count, estimated }) => {
     if (!estimated) {
-      return `${from}–${to} von ${count !== -1 ? count : `mehr als ${to}`}`;
+      return `${formatNumber(from)}–${formatNumber(to)} von ${count !== -1 ? formatNumber(count) : `mehr als ${formatNumber(to)}`}`;
     }
-    const estimatedLabel = estimated && estimated > to ? `ungefähr ${estimated}` : `mehr als ${to}`;
-    return `${from}–${to} von ${count !== -1 ? count : estimatedLabel}`;
+    const estimatedLabel =
+      estimated && estimated > to
+        ? `ungefähr ${formatNumber(estimated)}`
+        : `mehr als ${formatNumber(to)}`;
+    return `${formatNumber(from)}–${formatNumber(to)} von ${count !== -1 ? formatNumber(count) : estimatedLabel}`;
   },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/elGR.ts

@@ -204,10 +204,10 @@ const elGRGrid: Partial<GridLocaleText> = {
   // }) => {
   //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
+  //     return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
   //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
+  //   const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`;
+  //   return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`;
   // },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/esES.ts

@@ -1,5 +1,11 @@
 import type { GridLocaleText } from '../models/api/gridLocaleTextApi';
-import { getGridLocalization, type Localization } from '../utils/getGridLocalization';
+import {
+  getGridLocalization,
+  type Localization,
+  buildLocaleFormat,
+} from '../utils/getGridLocalization';
+
+const formatNumber = buildLocaleFormat('es-ES');
 
 const esESGrid: Partial<GridLocaleText> = {
   // Root
@@ -198,11 +204,13 @@ const esESGrid: Partial<GridLocaleText> = {
   paginationRowsPerPage: 'Filas por página:',
   paginationDisplayedRows: ({ from, to, count, estimated }) => {
     if (!estimated) {
-      return `${from}–${to} de ${count !== -1 ? count : `más de ${to}`}`;
+      return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : `más de ${formatNumber(to)}`}`;
     }
     const estimatedLabel =
-      estimated && estimated > to ? `alrededor de ${estimated}` : `más de ${to}`;
-    return `${from}–${to} de ${count !== -1 ? count : estimatedLabel}`;
+      estimated && estimated > to
+        ? `alrededor de ${formatNumber(estimated)}`
+        : `más de ${formatNumber(to)}`;
+    return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : estimatedLabel}`;
   },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/faIR.ts

@@ -204,10 +204,10 @@ const faIRGrid: Partial<GridLocaleText> = {
   // }) => {
   //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
+  //     return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
   //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
+  //   const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`;
+  //   return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`;
   // },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/fiFI.ts

@@ -204,10 +204,10 @@ const fiFIGrid: Partial<GridLocaleText> = {
   // }) => {
   //   const unknownRowCount = count == null || count === -1;
   //   if (!estimated) {
-  //     return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
+  //     return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
   //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
+  //   const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`;
+  //   return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`;
   // },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {

packages/x-data-grid/src/locales/frFR.ts

@@ -1,5 +1,11 @@
 import type { GridLocaleText } from '../models/api/gridLocaleTextApi';
-import { getGridLocalization, type Localization } from '../utils/getGridLocalization';
+import {
+  getGridLocalization,
+  type Localization,
+  buildLocaleFormat,
+} from '../utils/getGridLocalization';
+
+const formatNumber = buildLocaleFormat('fr-FR');
 
 const frFRGrid: Partial<GridLocaleText> = {
   // Root
@@ -198,10 +204,13 @@ const frFRGrid: Partial<GridLocaleText> = {
   paginationRowsPerPage: 'Lignes par page :',
   paginationDisplayedRows: ({ from, to, count, estimated }) => {
     if (!estimated) {
-      return `${from}–${to} sur ${count !== -1 ? count : `plus de ${to}`}`;
+      return `${formatNumber(from)}–${formatNumber(to)} sur ${count !== -1 ? formatNumber(count) : `plus de ${formatNumber(to)}`}`;
     }
-    const estimatedLabel = estimated && estimated > to ? `environ ${estimated}` : `plus de ${to}`;
-    return `${from}–${to} sur ${count !== -1 ? count : estimatedLabel}`;
+    const estimatedLabel =
+      estimated && estimated > to
+        ? `environ ${formatNumber(estimated)}`
+        : `plus de ${formatNumber(to)}`;
+    return `${formatNumber(from)}–${formatNumber(to)} sur ${count !== -1 ? formatNumber(count) : estimatedLabel}`;
   },
   paginationItemAriaLabel: (type) => {
     if (type === 'first') {