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

docs/data/data-grid/localization/PaginationNumberFormatting.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { frFR as locale } from '@mui/x-data-grid/locales';
+
+const LOCALE = 'fr-FR'; // replace with your locale
+
+const formatNumber = (value) => {
+  if (typeof Intl !== 'undefined' && Intl.NumberFormat) {
+    try {
+      const result = new Intl.NumberFormat(LOCALE).format(Number(value));
+      return result === 'NaN' ? String(value) : result;
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+};
+
+const paginationDisplayedRows = ({ from, to, count, estimated }) => {
+  if (!estimated) {
+    return `${formatNumber(from)}–${formatNumber(to)} sur ${
+      count !== -1 ? formatNumber(count) : `plus de ${formatNumber(to)}`
+    }`;
+  }
+  const estimatedLabel =
+    estimated && estimated > to
+      ? `environ ${formatNumber(estimated)}`
+      : `plus de ${formatNumber(to)}`;
+  return `${formatNumber(from)}–${formatNumber(to)} sur ${
+    count !== -1 ? formatNumber(count) : estimatedLabel
+  }`;
+};
+
+const localeText = {
+  ...locale.components.MuiDataGrid.defaultProps.localeText,
+  paginationDisplayedRows,
+};
+
+export default function PaginationNumberFormatting() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 4,
+    maxColumns: 6,
+  });
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        pagination
+        paginationMode="server"
+        pageSizeOptions={[10000, 20000]}
+        paginationModel={{ page: 1, pageSize: 10000 }}
+        rowCount={1000000}
+        localeText={localeText}
+      />
+    </div>
+  );
+}

docs/data/data-grid/localization/PaginationNumberFormatting.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { frFR as locale } from '@mui/x-data-grid/locales';
+
+const LOCALE = 'fr-FR'; // replace with your locale
+
+const formatNumber = (value: number | string): string => {
+  if (typeof Intl !== 'undefined' && Intl.NumberFormat) {
+    try {
+      const result = new Intl.NumberFormat(LOCALE).format(Number(value));
+      return result === 'NaN' ? String(value) : result;
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+};
+
+const paginationDisplayedRows = ({
+  from,
+  to,
+  count,
+  estimated,
+}: {
+  from: number;
+  to: number;
+  count: number;
+  estimated?: number;
+}) => {
+  if (!estimated) {
+    return `${formatNumber(from)}–${formatNumber(to)} sur ${
+      count !== -1 ? formatNumber(count) : `plus de ${formatNumber(to)}`
+    }`;
+  }
+  const estimatedLabel =
+    estimated && estimated > to
+      ? `environ ${formatNumber(estimated)}`
+      : `plus de ${formatNumber(to)}`;
+  return `${formatNumber(from)}–${formatNumber(to)} sur ${
+    count !== -1 ? formatNumber(count) : estimatedLabel
+  }`;
+};
+
+const localeText = {
+  ...locale.components.MuiDataGrid.defaultProps.localeText,
+  paginationDisplayedRows,
+};
+
+export default function PaginationNumberFormatting() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 4,
+    maxColumns: 6,
+  });
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        pagination
+        paginationMode="server"
+        pageSizeOptions={[10000, 20000]}
+        paginationModel={{ page: 1, pageSize: 10000 }}
+        rowCount={1000000}
+        localeText={localeText}
+      />
+    </div>
+  );
+}

docs/data/data-grid/localization/PaginationNumberFormatting.tsx.preview

@@ -0,0 +1,9 @@
+<DataGridPro
+  {...data}
+  pagination
+  paginationMode="server"
+  pageSizeOptions={[10000, 20000]}
+  paginationModel={{ page: 1, pageSize: 10000 }}
+  rowCount={1000000}
+  localeText={localeText}
+/>

docs/data/data-grid/localization/localization.md

@@ -14,25 +14,6 @@ In the following example, the label of the quick filter placeholder is customize
 
 {{"demo": "CustomLocaleTextGrid.js", "bg": "inline"}}
 
-:::warning
-It's important to note that because the Data Grid uses components from the Material UI library, some translation keys need to be accessed using that component key.
-
-One example is the table pagination component used in the Data Grid footer when pagination is enabled. All the keys provided to the `MuiTablePagination` object are applied as props directly to the [Table Pagination](/material-ui/api/table-pagination/) component.
-
-```jsx
-<DataGrid
-  {...data}
-  localeText={{
-    MuiTablePagination: {
-      labelDisplayedRows: ({ from, to, count }) =>
-        `${from} - ${to} of ${count === -1 ? `more than ${to}` : count}`,
-    },
-  }}
-/>
-```
-
-:::
-
 ## Locale text
 
 The default locale of MUI X is English (United States).
@@ -114,6 +95,67 @@ The example below demonstrates how to use an RTL language (Arabic) with the Data
 
 {{"demo": "DataGridRTL.js", "bg": "inline"}}
 
+## Pagination number formatting
+
+To format large numbers in the pagination component, customize the `paginationDisplayedRows` with the following code:
+
+```jsx
+import { DataGridPro } from '@mui/x-data-grid-pro';
+
+// ======================================================
+// TODO: replace with your locale
+import { frFR as locale } from '@mui/x-data-grid/locales';
+const LOCALE = 'fr-FR';
+// ======================================================
+
+const formatNumber = (value: number | string): string => {
+  if (typeof Intl !== 'undefined' && Intl.NumberFormat) {
+    try {
+      const result = new Intl.NumberFormat(LOCALE).format(Number(value));
+      return result === 'NaN' ? value : result;
+    } catch {
+      return value;
+    }
+  }
+  return value;
+};
+
+const paginationDisplayedRows = ({
+  from,
+  to,
+  count,
+  estimated,
+}: {
+  from: number;
+  to: number;
+  count: number;
+  page: number;
+  estimated?: number;
+}) => {
+  if (!estimated) {
+    return `${formatNumber(from)}–${formatNumber(to)} sur ${
+      count !== -1 ? formatNumber(count) : `plus de ${formatNumber(to)}`
+    }`;
+  }
+  const estimatedLabel =
+    estimated && estimated > to
+      ? `environ ${formatNumber(estimated)}`
+      : `plus de ${formatNumber(to)}`;
+  return `${formatNumber(from)}–${formatNumber(to)} sur ${
+    count !== -1 ? formatNumber(count) : estimatedLabel
+  }`;
+};
+
+locale.components.MuiDataGrid.defaultProps.localeText.paginationDisplayedRows =
+  paginationDisplayedRows;
+
+<DataGridPro
+  localeText={locale.components.MuiDataGrid.defaultProps.localeText}
+/>
+```
+
+{{"demo": "PaginationNumberFormatting.js", "bg": "inline"}}
+
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)