Comments (13)
@michelengelen do you think it would justify a doc example?
Probably ... its not easy to find that feature otherwise
I'll reopen and add it to the recipe umbrella!
from mui-x.
This looks like a sub-issue of the parent one: mui/material-ui#24495. I proposed a possible solution a while back: mui/material-ui#24495 (comment).
Side observations:
- all our locales number formatting feels straight wrong:
I would expect:
`${visibleCount.toLocaleString('fr-FR')} sur ${totalCount.toLocaleString('fr-FR')}`,
e.g. if Pennylane adopts our data grid, it will be wrong. My default OS language is English (so what toLocaleString
will output), but I might set the language picker in their UI to French so I can take screenshots for the accountant. The data grid would show the number assuming the English locale, not the French one ❌.
from mui-x.
Looking at the code, it seems that you have a labelDisplayedRows
locale key on the MuiTablePagination
locale entry of the grid (those nested locale entry are super hard to understand IMHO).
This would be nice to have an example if it does work
And if it doesn't and you do need to create a custom pagination component, then I fully agree that we could improve the DX 👍
from mui-x.
Yeah, I forget that one every time 😆
The Base UI team is experiencing similar issues with the NumberInput
, maybe we will be able to use the same approach in the end.
from mui-x.
Probably already possible with a custom pagination and the TablePagination component ... the prop labelDisplayedRows
looks like it would do the trick here
But this seems like a very heavy customization for such a little thing!
@mui/xgrid WDYT?
from mui-x.
Oh yes, that actually works!
FYI: numbers were artificially created to test this ((10000).toLocaleString('en')
)
Thanks @flaviendelangle for this tip! 👍🏼
slotProps={{
pagination: { labelDisplayedRows: ({ from, to, count }) => `${from.toLocaleString('en')}-${to.toLocaleString('en')}`},
}}
from mui-x.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@Janpot: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.
from mui-x.
@michelengelen do you think it would justify a doc example?
from mui-x.
its not easy to find that feature otherwise
It would be nice to have some kind of API pages for the slots, but that's a big initiative and not specific to this prop in particular.
from mui-x.
Respecting the decision ofcourse but gonna play a bit advocate of the devil here. To me it seems strange that the localeText
is not formatting the numbers it interpollates by default. Imagining there was a text with a date, we wouldn't just stringify that date neither, we'd format it to the user locale. It feels a bit like this API is only doing half its job this way. I find it hard to imagine that not formatting the numbers would be part of more than 5% of use-cases out there.
from mui-x.
Related issues #7457
from mui-x.
Right, SSR, good concern 👍
from mui-x.
🤔 Actually, if the texts are already localized, why can't the localization of the numbers follow the text? If there is an actual SSR problem, shouldn't it then be already present in the current localization of the texts?
from mui-x.
Related Issues (20)
- [data grid] Select/deselect all is not working as expected in data grid premium with row grouping HOT 4
- [data grid] Customize grouping Rows HOT 12
- [TreeView] Use selectors on `TreeItem` instead of `instance` methods
- [pickers] The monthly label moves up with quickly switch between months HOT 5
- [DataGrid] Improve keyboard navigation based on the ARIA spec
- [data grid] Unexpected keyboard tab navigation behaviour within cells HOT 9
- [docs] Add a recipe for persisting filters on page refresh HOT 2
- [data grid] Add new rows on paste HOT 1
- @mui/x-license 7.12.1 not available HOT 1
- [data grid] Exception when printing styled Data Grid with hidden columns "Cannot read properties of null (reading 'cloneNode')" HOT 4
- [data grid] Editing row from example code not working HOT 2
- [data grid] Apply page level filtering once all filter are selected and click on button like 'Apply Filters' HOT 2
- [pickers] How to extend type for `slotProps`? HOT 3
- Date Time Range Picker HOT 1
- [data grid] Copy & Paste on Cells using localize keyboard HOT 3
- [data grid] Bundle size win opportunities
- [pickers] Customization DX, ideas
- [data grid] TanStack Query integration demos HOT 2
- [tree view] `apiRef` type is `Partial<{}>` which causes Typescript compilation to fail HOT 5
- [pickers][DatePicker] Calendar not fully displayed and next arrow unresponsive HOT 5
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.