search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4k stars 1.24k forks source link

[data grid] Format row count numbers in pagination #13222

Open Janpot opened 2 months ago

Janpot commented 2 months ago

Summary

Live demo https://stackblitz.com/edit/react-jxqb4n?file=Demo.tsx

The pagination control looks like:

Screenshot 2024-05-23 at 14 58 46

Would it be possible to format these numbers? A thousands separator would make them more readable. In practice this is mostly going to be interesting for the total count, but once you start formatting, you may as well do it for all of these numbers.

Examples

Screenshot 2024-05-23 at 15 05 47

Motivation

No response

Search keywords: pagination format number

michelengelen commented 2 months ago

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?

flaviendelangle commented 2 months ago

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 :+1:

michelengelen commented 2 months ago

Oh yes, that actually works!

Screenshot 2024-05-23 at 16 36 50

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')}`},
}}
github-actions[bot] commented 2 months ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. 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.

flaviendelangle commented 2 months ago

@michelengelen do you think it would justify a doc example?

michelengelen commented 2 months ago

@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!

flaviendelangle commented 2 months ago

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.

Janpot commented 2 months ago

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.

flaviendelangle commented 2 months ago

Related issues #7457

Janpot commented 2 months ago

Right, SSR, good concern 👍

flaviendelangle commented 2 months ago

Yeah, I forget that one every time :laughing: The Base UI team is experiencing similar issues with the NumberInput, maybe we will be able to use the same approach in the end.

Janpot commented 2 months ago

🤔 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?

oliviertassinari commented 2 months ago

This looks like a sub-issue of the parent one: https://github.com/mui/material-ui/issues/24495. I proposed a possible solution a while back: https://github.com/mui/material-ui/issues/24495#issuecomment-762829673.

Side observations:

  1. all our locales number formatting feels straight wrong:

https://github.com/mui/mui-x/blob/0c231d4cd17cfdba020534fa340e98b27c5c311f/packages/x-data-grid/src/locales/frFR.ts#L133

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 ❌.