[data grid] Format row count numbers in pagination

[Janpot]

Summary

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

The pagination control looks like:

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

Motivation

No response

Search keywords: pagination format number

[michelengelen]

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]

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 👍

[michelengelen]

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')}`},
}}

[github-actions]

⚠️ 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]

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

[michelengelen]

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