Code Monkey home page Code Monkey logo

Comments (2)

MBilalShafi avatar MBilalShafi commented on September 7, 2024

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: #3211

from mui-x.

MaSsoumeh avatar MaSsoumeh commented on September 7, 2024

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

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

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

@aliabbaszade1990

from mui-x.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.