[table] TablePagination component does not localize the numbers

[aliabbaszade1990]

Steps to reproduce

No response

Current behavior

Expected behavior

TablePagination component should localize numbers like text part

Context

No response

Your environment

No response

Search keywords: TablePagination

Search keywords:

[MBilalShafi]

That's because it's localized that way. TablePagination comes from @mui/material package, and so does its localization. The localization is mostly done by the community members, here's a diff that adds the functionality to convert from English numbers to Arabic ones for the locale arSA for TablePagination.

diff --git a/packages/mui-material/src/locale/index.ts b/packages/mui-material/src/locale/index.ts
index 8c3e85ea88..9d76cf4b55 100644
--- a/packages/mui-material/src/locale/index.ts
+++ b/packages/mui-material/src/locale/index.ts
@@ -170,6 +170,9 @@ export const arEG: Localization = {
   },
 };
 
+// https://stackoverflow.com/a/52089026/1685741
+const enToAr = (value: number) => String(value).replace(/\d/g, d => String.fromCharCode('0x06F'+d));
+
 export const arSA: Localization = {
   components: {
     MuiBreadcrumbs: {
@@ -194,7 +197,7 @@ export const arSA: Localization = {
         },
         labelRowsPerPage: 'عدد الصفوف في الصفحة:',
         labelDisplayedRows: ({ from, to, count }) =>
-          `${from}–${to} من ${count !== -1 ? count : ` أكثر من${to}`}`,
+          `${enToAr(from)}–${enToAr(to)} من ${count !== -1 ? enToAr(count) : ` أكثر من${enToAr(to)}`}`,
       },
     },
     MuiRating: {

Feel free to open up a PR with a similar change of the locale you are interested in.
Check this related issue for more details and examples of the PRs opened by other users: mui/mui-x#3211

[MaSsoumeh]

Apply this style to your DataGrid , it could fix it.

 ["& .MuiDataGrid-footerContainer *"]: {
    fontFamily: "IRANSans",  //or any other Persian font
  },

and for the pageSize pass this prop to customize it

  <DataGrid
    pageSizeOptions={[
          { value: 5, label: "۱۰" },
          { value: 10, label: "۲۰" },
          { value: 20, label: "۳۰" },
        ]}

https://mui.com/x/react-data-grid/pagination/

@aliabbaszade1990

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[oliviertassinari]

This issue looks like a sub issue of #24495, more or less a duplicate.

There are workaround, but not built-in solutions.

[flaviendelangle]

This makes me think of mui/mui-x#11639 which I did recently

For dates, the will to render digits as in the localized alphabet or note is handled by the date library (moment & co), all we have to do it to make sure that we are handling this scenario correctly (if the date library renders a localized digit, then we should pass localized digits when typing for instance).

For your scenario, you don't have a date library for the user to define if he wants to localize or not. And it's unclear to me if all users would want their digit to be localized.
I don't think any french dev would complain if you would use the french formatting of large numbers (12 345), but for digit in another alphabet, it's unclear to me if all devs want the localized version or if some want the localized and other the non-localized.

[MBilalShafi]

And it's unclear to me if all users would want their digit to be localized

That's a very good point. My experience around Urdu (ur-PK) locale implies that it's a mixed ratio, more people would want to use English digits rather than the Urdu ones, as people are more comfortable with the former. So as @oliviertassinari mentioned, the solution I proposed might not be a long term one and would not work for all the cases.

In Data Grid's perspective, a more specific and quicker workaround that would not require an update on the locale could be providing the translation keys for MuiTablePagination using localeText prop. Could this be a reasonable middle-ground for now keeping in mind the point of not everyone would want the digits to be localized?

<DataGrid
  {...data}
  localeText={{
    MuiTablePagination: {
      labelDisplayedRows: ({ from, to, count }) =>
        `${convertDigits(from)} - ${convertDigits(to)} of more than ${convertDigits(count)}`,
    },
  }}
/>

A proper long term solution still needs to be explored though, which would allow the users to do this switching as needed instead of enforcing on all the users.