Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,43 @@ The steps you need to take to migrate from Material UI v7 to v9 are described
This list is a work in progress.
Expect updates as new breaking changes are introduced.
:::

### TablePagination numbers are formatted by default

Pagination numbers in `TablePagination` are now formatted using `Intl.NumberFormat` according to the locale.
For example, `103177` is displayed as `103,177` in `en-US` or `103.177` in `de-DE`.

To opt out of number formatting, provide a custom `labelDisplayedRows` function:

```jsx
<TablePagination
labelDisplayedRows={({ from, to, count }) =>
`${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`
}
/>
```

Or when using a locale:

```jsx
import { enUS } from '@mui/material/locale';

const theme = createTheme(
{
palette: {
primary: { main: '#1976d2' },
},
},
enUS,
{
components: {
MuiTablePagination: {
defaultProps: {
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
},
},
},
},
);
```
2 changes: 1 addition & 1 deletion docs/pages/material-ui/api/table-pagination.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
},
"labelDisplayedRows": {
"type": { "name": "func" },
"default": "function defaultLabelDisplayedRows({ from, to, count }) {\n return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;\n}"
"default": "function defaultLabelDisplayedRows({ from, to, count }) {\n return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;\n}"
},
"labelRowsPerPage": { "type": { "name": "node" }, "default": "'Rows per page:'" },
"nextIconButtonProps": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default function defaultLabelDisplayedRows({ from, to, count }) {
* return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
* return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
* }
*/
labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
Expand Down
7 changes: 5 additions & 2 deletions packages/mui-material/src/TablePagination/TablePagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import TablePaginationActions from '../TablePaginationActions';
import useId from '../utils/useId';
import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
import useSlot from '../utils/useSlot';
import { buildFormatNumber } from '../locale/utils/formatNumber';

const formatNumber = buildFormatNumber('en-US');

const TablePaginationRoot = styled(TableCell, {
name: 'MuiTablePagination',
Expand Down Expand Up @@ -114,7 +117,7 @@ const TablePaginationDisplayedRows = styled('p', {
);

function defaultLabelDisplayedRows({ from, to, count }) {
return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
}

function defaultGetAriaLabel(type) {
Expand Down Expand Up @@ -380,7 +383,7 @@ TablePagination.propTypes /* remove-proptypes */ = {
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default function defaultLabelDisplayedRows({ from, to, count }) {
* return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
* return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
* }
*/
labelDisplayedRows: PropTypes.func,
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/amET.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('am-ET');

export const amET: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const amET: Localization = {
},
labelRowsPerPage: 'ረድፎች በአንድ ገጽ:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}-${to} ከ ${count !== -1 ? count : `${to} በላይ`}`,
`${formatNumber(from)}-${formatNumber(to)} ከ ${count !== -1 ? formatNumber(count) : `${formatNumber(to)} በላይ`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/arEG.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('ar-EG');

export const arEG: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const arEG: Localization = {
},
labelRowsPerPage: 'عدد الصفوف في الصفحة:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} من ${count !== -1 ? count : ` أكثر من${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} من ${count !== -1 ? formatNumber(count) : ` أكثر من${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/arSA.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('ar-SA');

export const arSA: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const arSA: Localization = {
},
labelRowsPerPage: 'عدد الصفوف في الصفحة:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} من ${count !== -1 ? count : ` أكثر من${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} من ${count !== -1 ? formatNumber(count) : ` أكثر من${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/arSD.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('ar-SD');

export const arSD: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const arSD: Localization = {
},
labelRowsPerPage: 'عدد الصفوف في الصفحة:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} من ${count !== -1 ? count : ` أكثر من${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} من ${count !== -1 ? formatNumber(count) : ` أكثر من${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/beBY.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('be-BY');

export const beBY: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const beBY: Localization = {
},
labelRowsPerPage: 'Радкоў на старонцы:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} з ${count !== -1 ? count : `больш чым ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} з ${count !== -1 ? formatNumber(count) : `больш чым ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/bnBD.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('bn-BD');

export const bnBD: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const bnBD: Localization = {
},
labelRowsPerPage: 'প্রতি পৃষ্ঠায় সারি:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} / ${count !== -1 ? count : `${to} থেকে বেশি`}`,
`${formatNumber(from)}–${formatNumber(to)} / ${count !== -1 ? formatNumber(count) : `${formatNumber(to)} থেকে বেশি`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/caES.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('ca-ES');

export const caES: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const caES: Localization = {
},
labelRowsPerPage: 'Files per pàgina:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} de ${count !== -1 ? count : `més de ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : `més de ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/csCZ.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('cs-CZ');

export const csCZ: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const csCZ: Localization = {
},
labelRowsPerPage: 'Řádků na stránce:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} z ${count !== -1 ? count : `více než ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} z ${count !== -1 ? formatNumber(count) : `více než ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/daDK.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('da-DK');

export const daDK: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const daDK: Localization = {
},
labelRowsPerPage: 'Rækker pr side:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}-${to} af ${count !== -1 ? count : `mere end ${to}`}`,
`${formatNumber(from)}-${formatNumber(to)} af ${count !== -1 ? formatNumber(count) : `mere end ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/deDE.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('de-DE');

export const deDE: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const deDE: Localization = {
},
labelRowsPerPage: 'Zeilen pro Seite:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} von ${count !== -1 ? count : `mehr als ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} von ${count !== -1 ? formatNumber(count) : `mehr als ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/elGR.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('el-GR');

export const elGR: Localization = {
components: {
Expand All @@ -25,7 +28,7 @@ export const elGR: Localization = {
},
labelRowsPerPage: 'Γραμμές ανα σελίδα:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} από ${count !== -1 ? count : `πάνω από ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} από ${count !== -1 ? formatNumber(count) : `πάνω από ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/esES.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('es-ES');

export const esES: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const esES: Localization = {
},
labelRowsPerPage: 'Filas por página:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} de ${count !== -1 ? count : `más de ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : `más de ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/etEE.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('et-EE');

export const etEE: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const etEE: Localization = {
},
labelRowsPerPage: 'Ridu leheküljel:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} / ${count !== -1 ? count : `rohkem kui ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} / ${count !== -1 ? formatNumber(count) : `rohkem kui ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/faIR.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('fa-IR');

export const faIR: Localization = {
components: {
Expand Down Expand Up @@ -29,7 +32,7 @@ export const faIR: Localization = {
},
labelRowsPerPage: 'تعداد سطرهای هر صفحه:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} از ${count !== -1 ? count : `بیشتر از ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} از ${count !== -1 ? formatNumber(count) : `بیشتر از ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/fiFI.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('fi-FI');

export const fiFI: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const fiFI: Localization = {
},
labelRowsPerPage: 'Rivejä per sivu:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} / ${count !== -1 ? count : `enemmän kuin ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} / ${count !== -1 ? formatNumber(count) : `enemmän kuin ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/frFR.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('fr-FR');

export const frFR: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const frFR: Localization = {
},
labelRowsPerPage: 'Lignes par page :',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} sur ${count !== -1 ? count : `plus que ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} sur ${count !== -1 ? formatNumber(count) : `plus que ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/heIL.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('he-IL');

export const heIL: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const heIL: Localization = {
},
labelRowsPerPage: 'שורות בעמוד:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}–${to} מתוך ${count !== -1 ? count : `יותר מ ${to}`}`,
`${formatNumber(from)}–${formatNumber(to)} מתוך ${count !== -1 ? formatNumber(count) : `יותר מ ${formatNumber(to)}`}`,
},
},
MuiRating: {
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-material/src/locale/hiIN.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { Localization } from './utils/LocaleTextApi';
import { buildFormatNumber } from './utils/formatNumber';

const formatNumber = buildFormatNumber('hi-IN');

export const hiIN: Localization = {
components: {
Expand All @@ -24,7 +27,7 @@ export const hiIN: Localization = {
},
labelRowsPerPage: 'पंक्तियाँ प्रति पृष्ठ:',
labelDisplayedRows: ({ from, to, count }) =>
`${from}-${to === -1 ? count : to} कुल ${count} में`,
`${formatNumber(from)}-${to === -1 ? formatNumber(count) : formatNumber(to)} कुल ${formatNumber(count)} में`,
},
},
MuiRating: {
Expand Down
Loading
Loading