Comments (2)
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.
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/
from mui-x.
Related Issues (20)
- [pickers] using `disableOpenPicker` prop with responsive DatePicker shows no dates in mobile calendar dialog HOT 1
- [pickers] when using `clearable` field with DatePicker, selecting a date doesn't return focus to openPickerButton HOT 1
- Removed Watermark from DateRangePicker Component in MUI X (Pro) HOT 5
- [DateRangePicker] Date range is not highlighted properly with `AdapterLuxon` HOT 4
- [DataGrid] Notifications in full CRUD example HOT 1
- [data grid] cannot re-enter table body with keyboard after page change HOT 10
- [data grid] Apply the aggregation to lead to the undefined error in another column HOT 11
- date picker HOT 2
- [question] Bulk editing in MUI X Pro HOT 3
- [pickers] I am trying to migrate my custom TextField component which was returned by the renderInput from v5 to v6 DatePicker HOT 2
- [pickers] How to render custom TextField component in DatePicker (v6) HOT 13
- [fields] Support `clearable` for multi input range fields
- [data grid] TypeError: apiRef.current.getAllRowIds is not a function HOT 4
- [data grid] Autosizing not working on the column where we use renderCell value HOT 2
- [data grid] How should components that use the MUI X Data Grid be unit tested? HOT 5
- [data grid] How do I get the count of filtered rows on initial load when I have an initial state? HOT 3
- [DataGrid] Treedata event listener for group collapse/expand HOT 2
- [DataGrid] Treedata expand/collapse does not trigger onRowClick-Event HOT 8
- [data grid] columnVisibilityModel breaks `Show all` and `Hide all` buttons in manage columns overlay HOT 14
- [data grid] event for popup open/close missing for pageSize popup HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.