diff --git a/docs/data/migration/migration-data-grid-v8/migration-data-grid-v8.md b/docs/data/migration/migration-data-grid-v8/migration-data-grid-v8.md new file mode 100644 index 0000000000000..ee5abefa5537b --- /dev/null +++ b/docs/data/migration/migration-data-grid-v8/migration-data-grid-v8.md @@ -0,0 +1,56 @@ +--- +title: Data Grid - Migration from v8 to v9 +productId: x-data-grid +--- + +# Migration from v8 to v9 + +

This guide describes the changes needed to migrate the Data Grid from v8 to v9.

+ +## Introduction + +This is a reference guide for upgrading `@mui/x-data-grid` from v8 to v9. + +:::success +This guide is also available in Markdown format to be referenced by AI tools like Copilot or Cursor to help you with the migration. +::: + +## Start using the new release + +In `package.json`, change the version of the Data Grid package to `next`. + +```diff +-"@mui/x-data-grid": "^8.x.x", ++"@mui/x-data-grid": "next", + +-"@mui/x-data-grid-pro": "^8.x.x", ++"@mui/x-data-grid-pro": "next", + +-"@mui/x-data-grid-premium": "^8.x.x", ++"@mui/x-data-grid-premium": "next", +``` + +## Breaking changes + +### Behavioral changes + +- Pagination numbers are formatted by default. + + To disable the pagination formatting, provide the key and value to `localeText` prop: + + ```diff + { + + if (!estimated) { + + return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; + + } + + const estimatedLabel = + + estimated && estimated > to + + ? `around ${estimated}` + + : `more than ${to}`; + + return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`; + + } + + }} + /> + ``` diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 602cc616985af..40eaccdc497af 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -832,7 +832,7 @@ const pages: MuiPage[] = [ pathname: '/x/migration-v9', subheader: 'Upgrade to v9', children: [ - // { pathname: '/x/migration/migration-data-grid-v8', title: 'Breaking changes: Data Grid' }, + { pathname: '/x/migration/migration-data-grid-v8', title: 'Breaking changes: Data Grid' }, // { // pathname: '/x/migration/migration-pickers-v8', // title: 'Breaking changes: Date and Time Pickers', diff --git a/docs/pages/x/migration/migration-data-grid-v8.js b/docs/pages/x/migration/migration-data-grid-v8.js new file mode 100644 index 0000000000000..1bf87ea719137 --- /dev/null +++ b/docs/pages/x/migration/migration-data-grid-v8.js @@ -0,0 +1,6 @@ +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/migration/migration-data-grid-v8/migration-data-grid-v8.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/packages/x-data-grid/src/constants/localeTextConstants.ts b/packages/x-data-grid/src/constants/localeTextConstants.ts index 22df9fddc7c8b..2adb3fb919699 100644 --- a/packages/x-data-grid/src/constants/localeTextConstants.ts +++ b/packages/x-data-grid/src/constants/localeTextConstants.ts @@ -1,4 +1,7 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; +import { buildLocaleFormat } from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('en-US'); export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { // Root @@ -198,10 +201,13 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { paginationDisplayedRows: ({ from, to, count, estimated }) => { const unknownRowCount = count == null || count === -1; if (!estimated) { - return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `around ${formatNumber(estimated)}` + : `more than ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/arSD.ts b/packages/x-data-grid/src/locales/arSD.ts index 13260775fe6aa..9061a1b5d9ae1 100644 --- a/packages/x-data-grid/src/locales/arSD.ts +++ b/packages/x-data-grid/src/locales/arSD.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('ar-SD'); const arSDGrid: Partial = { // Root @@ -196,10 +202,13 @@ const arSDGrid: Partial = { paginationRowsPerPage: 'عدد الصفوف في الصفحة:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `\u200E${to}-${from}\u200E من ${count !== -1 ? count : `أكثر من ${to}`}`; + return `\u200E${formatNumber(to)}-${formatNumber(from)}\u200E من ${count !== -1 ? formatNumber(count) : `أكثر من ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `حوالي ${estimated}` : `أكثر من ${to}`; - return `\u200E${to}-${from}\u200E من ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `حوالي ${formatNumber(estimated)}` + : `أكثر من ${formatNumber(to)}`; + return `\u200E${formatNumber(to)}-${formatNumber(from)}\u200E من ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/beBY.ts b/packages/x-data-grid/src/locales/beBY.ts index 044ce8e0a2ed5..fc08435acb078 100644 --- a/packages/x-data-grid/src/locales/beBY.ts +++ b/packages/x-data-grid/src/locales/beBY.ts @@ -233,10 +233,10 @@ const beBYGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/bgBG.ts b/packages/x-data-grid/src/locales/bgBG.ts index 704b5c8e2ddfc..1c406b7dcb885 100644 --- a/packages/x-data-grid/src/locales/bgBG.ts +++ b/packages/x-data-grid/src/locales/bgBG.ts @@ -202,10 +202,10 @@ const bgBGGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/bnBD.ts b/packages/x-data-grid/src/locales/bnBD.ts index 0d2d287ad2a32..a2a9012b96411 100644 --- a/packages/x-data-grid/src/locales/bnBD.ts +++ b/packages/x-data-grid/src/locales/bnBD.ts @@ -204,10 +204,10 @@ const bnBDGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/caES.ts b/packages/x-data-grid/src/locales/caES.ts index f1c7cb481d9c0..a85c9015ec460 100644 --- a/packages/x-data-grid/src/locales/caES.ts +++ b/packages/x-data-grid/src/locales/caES.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('ca-ES'); const caESGrid: Partial = { // Root @@ -198,11 +204,13 @@ const caESGrid: Partial = { paginationRowsPerPage: 'Files per pàgina:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} de ${count !== -1 ? count : `més de ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : `més de ${formatNumber(to)}`}`; } const estimatedLabel = - estimated && estimated > to ? `al voltant de ${estimated}` : `més de ${to}`; - return `${from}–${to} de ${count !== -1 ? count : estimatedLabel}`; + estimated && estimated > to + ? `al voltant de ${formatNumber(estimated)}` + : `més de ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/csCZ.ts b/packages/x-data-grid/src/locales/csCZ.ts index 29e23dac2132a..27244823dbb62 100644 --- a/packages/x-data-grid/src/locales/csCZ.ts +++ b/packages/x-data-grid/src/locales/csCZ.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('cs-CZ'); const csCZGrid: Partial = { // Root @@ -224,11 +230,13 @@ const csCZGrid: Partial = { paginationRowsPerPage: 'Řádků na stránce:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} z ${count !== -1 ? count : `více než ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} z ${count !== -1 ? formatNumber(count) : `více než ${formatNumber(to)}`}`; } const estimatedLabel = - estimated && estimated > to ? `přibližně ${estimated}` : `více než ${to}`; - return `${from}–${to} z ${count !== -1 ? count : estimatedLabel}`; + estimated && estimated > to + ? `přibližně ${formatNumber(estimated)}` + : `více než ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} z ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/daDK.ts b/packages/x-data-grid/src/locales/daDK.ts index 14d5d4267cd1f..ea9981ad6fc6c 100644 --- a/packages/x-data-grid/src/locales/daDK.ts +++ b/packages/x-data-grid/src/locales/daDK.ts @@ -202,10 +202,10 @@ const daDKGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/deDE.ts b/packages/x-data-grid/src/locales/deDE.ts index e5648fdcf2200..18848a9b5ffaa 100644 --- a/packages/x-data-grid/src/locales/deDE.ts +++ b/packages/x-data-grid/src/locales/deDE.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('de-DE'); const deDEGrid: Partial = { // Root @@ -199,10 +205,13 @@ const deDEGrid: Partial = { paginationRowsPerPage: 'Zeilen pro Seite:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} von ${count !== -1 ? count : `mehr als ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} von ${count !== -1 ? formatNumber(count) : `mehr als ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `ungefähr ${estimated}` : `mehr als ${to}`; - return `${from}–${to} von ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `ungefähr ${formatNumber(estimated)}` + : `mehr als ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} von ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/elGR.ts b/packages/x-data-grid/src/locales/elGR.ts index cc4d6132731e3..2224800da1a6e 100644 --- a/packages/x-data-grid/src/locales/elGR.ts +++ b/packages/x-data-grid/src/locales/elGR.ts @@ -204,10 +204,10 @@ const elGRGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/esES.ts b/packages/x-data-grid/src/locales/esES.ts index 240e53bd200c4..c40b4a7c2b16b 100644 --- a/packages/x-data-grid/src/locales/esES.ts +++ b/packages/x-data-grid/src/locales/esES.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('es-ES'); const esESGrid: Partial = { // Root @@ -198,11 +204,13 @@ const esESGrid: Partial = { paginationRowsPerPage: 'Filas por página:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} de ${count !== -1 ? count : `más de ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : `más de ${formatNumber(to)}`}`; } const estimatedLabel = - estimated && estimated > to ? `alrededor de ${estimated}` : `más de ${to}`; - return `${from}–${to} de ${count !== -1 ? count : estimatedLabel}`; + estimated && estimated > to + ? `alrededor de ${formatNumber(estimated)}` + : `más de ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/faIR.ts b/packages/x-data-grid/src/locales/faIR.ts index 8d8e251650f32..90ca2cd919e63 100644 --- a/packages/x-data-grid/src/locales/faIR.ts +++ b/packages/x-data-grid/src/locales/faIR.ts @@ -204,10 +204,10 @@ const faIRGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/fiFI.ts b/packages/x-data-grid/src/locales/fiFI.ts index ec52dab906143..75a0bbaf2daec 100644 --- a/packages/x-data-grid/src/locales/fiFI.ts +++ b/packages/x-data-grid/src/locales/fiFI.ts @@ -204,10 +204,10 @@ const fiFIGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/frFR.ts b/packages/x-data-grid/src/locales/frFR.ts index 6694890167ace..7824119109203 100644 --- a/packages/x-data-grid/src/locales/frFR.ts +++ b/packages/x-data-grid/src/locales/frFR.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('fr-FR'); const frFRGrid: Partial = { // Root @@ -198,10 +204,13 @@ const frFRGrid: Partial = { paginationRowsPerPage: 'Lignes par page :', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} sur ${count !== -1 ? count : `plus de ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} sur ${count !== -1 ? formatNumber(count) : `plus de ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `environ ${estimated}` : `plus de ${to}`; - return `${from}–${to} sur ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `environ ${formatNumber(estimated)}` + : `plus de ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} sur ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/heIL.ts b/packages/x-data-grid/src/locales/heIL.ts index 0fdb0dab4889c..78eacbaff4414 100644 --- a/packages/x-data-grid/src/locales/heIL.ts +++ b/packages/x-data-grid/src/locales/heIL.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('he-IL'); const heILGrid: Partial = { // Root @@ -196,10 +202,11 @@ const heILGrid: Partial = { paginationRowsPerPage: 'שורות בעמוד:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}-${to} מתוך ${count !== -1 ? count : `יותר מ־${to}`}`; + return `${formatNumber(from)}-${formatNumber(to)} מתוך ${count !== -1 ? formatNumber(count) : `יותר מ־${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `כ־${estimated}` : `יותר מ־${to}`; - return `${from}-${to} מתוך ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to ? `כ־${formatNumber(estimated)}` : `יותר מ־${formatNumber(to)}`; + return `${formatNumber(from)}-${formatNumber(to)} מתוך ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/hrHR.ts b/packages/x-data-grid/src/locales/hrHR.ts index fb43657cde723..d0c387413c441 100644 --- a/packages/x-data-grid/src/locales/hrHR.ts +++ b/packages/x-data-grid/src/locales/hrHR.ts @@ -1,5 +1,7 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization } from '../utils/getGridLocalization'; +import { getGridLocalization, buildLocaleFormat } from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('hr-HR'); const hrHRGrid: Partial = { // Root @@ -217,10 +219,13 @@ const hrHRGrid: Partial = { paginationRowsPerPage: 'Redova po stranici:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} od ${count !== -1 ? count : `više nego ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} od ${count !== -1 ? formatNumber(count) : `više nego ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `oko ${estimated}` : `više nego ${to}`; - return `${from}–${to} od ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `oko ${formatNumber(estimated)}` + : `više nego ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} od ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/huHU.ts b/packages/x-data-grid/src/locales/huHU.ts index 1bf71eb5dcbf9..99c2eb6ada21c 100644 --- a/packages/x-data-grid/src/locales/huHU.ts +++ b/packages/x-data-grid/src/locales/huHU.ts @@ -199,10 +199,10 @@ const huHUGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/hyAM.ts b/packages/x-data-grid/src/locales/hyAM.ts index d7d8b9dbd68d9..faa876e7be793 100644 --- a/packages/x-data-grid/src/locales/hyAM.ts +++ b/packages/x-data-grid/src/locales/hyAM.ts @@ -222,10 +222,10 @@ const hyAMGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, // paginationItemAriaLabel: type => { // if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/idID.ts b/packages/x-data-grid/src/locales/idID.ts index 6d92efed4bc24..da35e82be8a01 100644 --- a/packages/x-data-grid/src/locales/idID.ts +++ b/packages/x-data-grid/src/locales/idID.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('id-ID'); export const idIDGrid: Partial = { // Root @@ -193,11 +199,13 @@ export const idIDGrid: Partial = { paginationRowsPerPage: 'Baris per halaman:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} dari ${count !== -1 ? count : `lebih dari ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} dari ${count !== -1 ? formatNumber(count) : `lebih dari ${formatNumber(to)}`}`; } const estimatedLabel = - estimated && estimated > to ? `sekitar ${estimated}` : `lebih dari ${to}`; - return `${from}–${to} dari ${count !== -1 ? count : estimatedLabel}`; + estimated && estimated > to + ? `sekitar ${formatNumber(estimated)}` + : `lebih dari ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} dari ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/isIS.ts b/packages/x-data-grid/src/locales/isIS.ts index 1ad5043047b41..49b78bbba065f 100644 --- a/packages/x-data-grid/src/locales/isIS.ts +++ b/packages/x-data-grid/src/locales/isIS.ts @@ -202,10 +202,10 @@ const isISGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/itIT.ts b/packages/x-data-grid/src/locales/itIT.ts index 942cd33c61e3a..00476736cbfaf 100644 --- a/packages/x-data-grid/src/locales/itIT.ts +++ b/packages/x-data-grid/src/locales/itIT.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('it-IT'); const itITGrid: Partial = { // Root @@ -198,10 +204,13 @@ const itITGrid: Partial = { paginationRowsPerPage: 'Righe per pagina:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} di ${count !== -1 ? count : `più di ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} di ${count !== -1 ? formatNumber(count) : `più di ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `circa ${estimated}` : `più di ${to}`; - return `${from}–${to} di ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `circa ${formatNumber(estimated)}` + : `più di ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} di ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/jaJP.ts b/packages/x-data-grid/src/locales/jaJP.ts index e686dbc959f9d..ccae308fdc31f 100644 --- a/packages/x-data-grid/src/locales/jaJP.ts +++ b/packages/x-data-grid/src/locales/jaJP.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('ja-JP'); const jaJPGrid: Partial = { // Root @@ -193,10 +199,11 @@ const jaJPGrid: Partial = { paginationRowsPerPage: 'ページあたりの行数:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} of ${count !== -1 ? count : `${to}以上`}`; + return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `${formatNumber(to)}以上`}`; } - const estimatedLabel = estimated && estimated > to ? `${estimated}前後` : `${to}以上`; - return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to ? `${formatNumber(estimated)}前後` : `${formatNumber(to)}以上`; + return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/koKR.ts b/packages/x-data-grid/src/locales/koKR.ts index b55046eece111..6bdb9de111e15 100644 --- a/packages/x-data-grid/src/locales/koKR.ts +++ b/packages/x-data-grid/src/locales/koKR.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('ko-KR'); const koKRGrid: Partial = { // Root @@ -193,10 +199,11 @@ const koKRGrid: Partial = { paginationRowsPerPage: '페이지 당 행:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} of ${count !== -1 ? count : `${to} 이상`}`; + return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `${formatNumber(to)} 이상`}`; } - const estimatedLabel = estimated && estimated > to ? `약 ${estimated}` : `${to} 이상`; - return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to ? `약 ${formatNumber(estimated)}` : `${formatNumber(to)} 이상`; + return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/nbNO.ts b/packages/x-data-grid/src/locales/nbNO.ts index 36aa787bbc054..a64b5d77f4a9e 100644 --- a/packages/x-data-grid/src/locales/nbNO.ts +++ b/packages/x-data-grid/src/locales/nbNO.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('nb-NO'); const nbNOGrid: Partial = { // Root @@ -196,10 +202,13 @@ const nbNOGrid: Partial = { paginationRowsPerPage: 'Rader per side:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} av ${count !== -1 ? count : `mer enn ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} av ${count !== -1 ? formatNumber(count) : `mer enn ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `omtrent ${estimated}` : `mer enn ${to}`; - return `${from}–${to} av ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `omtrent ${formatNumber(estimated)}` + : `mer enn ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} av ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/nlNL.ts b/packages/x-data-grid/src/locales/nlNL.ts index 1b8e526d864b8..cf7ef8ffb3cdb 100644 --- a/packages/x-data-grid/src/locales/nlNL.ts +++ b/packages/x-data-grid/src/locales/nlNL.ts @@ -204,10 +204,10 @@ const nlNLGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/nnNO.ts b/packages/x-data-grid/src/locales/nnNO.ts index 52eaf609204e6..e6417a87cf329 100644 --- a/packages/x-data-grid/src/locales/nnNO.ts +++ b/packages/x-data-grid/src/locales/nnNO.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('nn-NO'); const nnNOGrid: Partial = { // Root @@ -197,10 +203,13 @@ const nnNOGrid: Partial = { paginationRowsPerPage: 'Rader per side:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} av ${count !== -1 ? count : `flere enn ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} av ${count !== -1 ? formatNumber(count) : `flere enn ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `omtrent ${estimated}` : `flere enn ${to}`; - return `${from}–${to} av ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `omtrent ${formatNumber(estimated)}` + : `flere enn ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} av ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/plPL.ts b/packages/x-data-grid/src/locales/plPL.ts index 6a6c1f013c3c2..39e95cf5e2586 100644 --- a/packages/x-data-grid/src/locales/plPL.ts +++ b/packages/x-data-grid/src/locales/plPL.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('pl-PL'); const plPLGrid: Partial = { // Root @@ -193,10 +199,13 @@ const plPLGrid: Partial = { paginationRowsPerPage: 'Wierszy na stronę:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} z ${count !== -1 ? count : `więcej niż ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} z ${count !== -1 ? formatNumber(count) : `więcej niż ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `około ${estimated}` : `więcej niż ${to}`; - return `${from}–${to} z ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `około ${formatNumber(estimated)}` + : `więcej niż ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} z ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/ptBR.ts b/packages/x-data-grid/src/locales/ptBR.ts index 3947433bc7fac..8761da88f7c1e 100644 --- a/packages/x-data-grid/src/locales/ptBR.ts +++ b/packages/x-data-grid/src/locales/ptBR.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('pt-BR'); const ptBRGrid: Partial = { // Root @@ -199,10 +205,13 @@ const ptBRGrid: Partial = { paginationRowsPerPage: 'Linhas por página:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} de ${count !== -1 ? count : `mais de ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : `mais de ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `cerca de ${estimated}` : `mais de ${to}`; - return `${from}–${to} de ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to + ? `cerca de ${formatNumber(estimated)}` + : `mais de ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/ptPT.ts b/packages/x-data-grid/src/locales/ptPT.ts index 3787c6985ad6f..20693ebc6d6ad 100644 --- a/packages/x-data-grid/src/locales/ptPT.ts +++ b/packages/x-data-grid/src/locales/ptPT.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('pt-PT'); const ptPTGrid: Partial = { // Root @@ -199,11 +205,13 @@ const ptPTGrid: Partial = { paginationRowsPerPage: 'Linhas por página:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} de ${count !== -1 ? count : `mais do que ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : `mais do que ${formatNumber(to)}`}`; } const estimatedLabel = - estimated && estimated > to ? `cerca de ${estimated}` : `mais do que ${to}`; - return `${from}–${to} de ${count !== -1 ? count : estimatedLabel}`; + estimated && estimated > to + ? `cerca de ${formatNumber(estimated)}` + : `mais do que ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} de ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/roRO.ts b/packages/x-data-grid/src/locales/roRO.ts index 3c0a65eebc7d5..71844cc5c10b4 100644 --- a/packages/x-data-grid/src/locales/roRO.ts +++ b/packages/x-data-grid/src/locales/roRO.ts @@ -204,10 +204,10 @@ const roROGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/ruRU.ts b/packages/x-data-grid/src/locales/ruRU.ts index 9a259f387f739..bfac1ef00df80 100644 --- a/packages/x-data-grid/src/locales/ruRU.ts +++ b/packages/x-data-grid/src/locales/ruRU.ts @@ -234,10 +234,10 @@ const ruRUGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/skSK.ts b/packages/x-data-grid/src/locales/skSK.ts index c26199e1f7219..bd42968b3bb00 100644 --- a/packages/x-data-grid/src/locales/skSK.ts +++ b/packages/x-data-grid/src/locales/skSK.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('sk-SK'); const skSKGrid: Partial = { // Root @@ -224,11 +230,13 @@ const skSKGrid: Partial = { paginationRowsPerPage: 'Riadkov na stránke:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} z ${count !== -1 ? count : `viac ako ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} z ${count !== -1 ? formatNumber(count) : `viac ako ${formatNumber(to)}`}`; } const estimatedLabel = - estimated && estimated > to ? `približne ${estimated}` : `viac ako ${to}`; - return `${from}–${to} z ${count !== -1 ? count : estimatedLabel}`; + estimated && estimated > to + ? `približne ${formatNumber(estimated)}` + : `viac ako ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} z ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/svSE.ts b/packages/x-data-grid/src/locales/svSE.ts index 36616c94389c1..01ff007e5ffcc 100644 --- a/packages/x-data-grid/src/locales/svSE.ts +++ b/packages/x-data-grid/src/locales/svSE.ts @@ -204,10 +204,10 @@ const svSEGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/thTH.ts b/packages/x-data-grid/src/locales/thTH.ts index 0fcc0078f20ee..9efd4d6adafa5 100644 --- a/packages/x-data-grid/src/locales/thTH.ts +++ b/packages/x-data-grid/src/locales/thTH.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('th-TH'); const thTHGrid: Partial = { // Root @@ -192,11 +198,13 @@ const thTHGrid: Partial = { // Pagination paginationRowsPerPage: 'แถวต่อหน้า:', paginationDisplayedRows: ({ from, to, count, estimated }) => { + const unknownRowCount = count == null || count === -1; if (!estimated) { - return `${from}–${to} จาก ${count !== -1 ? count : `มากกว่า ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} จาก ${!unknownRowCount ? formatNumber(count) : `มากกว่า ${formatNumber(to)}`}`; } - const estimatedLabel = estimated > to ? `ประมาณ ${estimated}` : `มากกว่า ${to}`; - return `${from}–${to} จาก ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated > to ? `ประมาณ ${formatNumber(estimated)}` : `มากกว่า ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} จาก ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/trTR.ts b/packages/x-data-grid/src/locales/trTR.ts index b6b4d5faf1f6d..2bd58724ff829 100644 --- a/packages/x-data-grid/src/locales/trTR.ts +++ b/packages/x-data-grid/src/locales/trTR.ts @@ -199,10 +199,10 @@ const trTRGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/ukUA.ts b/packages/x-data-grid/src/locales/ukUA.ts index 0f218632a4d9a..7392aadc2e9a9 100644 --- a/packages/x-data-grid/src/locales/ukUA.ts +++ b/packages/x-data-grid/src/locales/ukUA.ts @@ -1,5 +1,5 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { getGridLocalization, type Localization, formatNumber } from '../utils/getGridLocalization'; type PluralForm = { one: string; @@ -229,11 +229,13 @@ const ukUAGrid: Partial = { paginationDisplayedRows: ({ from, to, count, estimated }) => { const unknownRowCount = count == null || count === -1; if (!estimated) { - return `${from}–${to} з ${!unknownRowCount ? count : `більше ніж ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} з ${!unknownRowCount ? formatNumber(count) : `більше ніж ${formatNumber(to)}`}`; } const estimatedLabel = - estimated && estimated > to ? `близько ${estimated}` : `більше ніж ${to}`; - return `${from}–${to} з ${!unknownRowCount ? count : estimatedLabel}`; + estimated && estimated > to + ? `близько ${formatNumber(estimated)}` + : `більше ніж ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} з ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/urPK.ts b/packages/x-data-grid/src/locales/urPK.ts index eb723167a07e5..9d92361f87bec 100644 --- a/packages/x-data-grid/src/locales/urPK.ts +++ b/packages/x-data-grid/src/locales/urPK.ts @@ -202,10 +202,10 @@ const urPKGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/viVN.ts b/packages/x-data-grid/src/locales/viVN.ts index ea6300a4b311c..1262a329f99f0 100644 --- a/packages/x-data-grid/src/locales/viVN.ts +++ b/packages/x-data-grid/src/locales/viVN.ts @@ -202,10 +202,10 @@ const viVNGrid: Partial = { // }) => { // const unknownRowCount = count == null || count === -1; // if (!estimated) { - // return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`; // } - // const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`; - // return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`; + // const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`; + // return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`; // }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/zhCN.ts b/packages/x-data-grid/src/locales/zhCN.ts index c9d399b6e2dd2..811f3d49305a3 100644 --- a/packages/x-data-grid/src/locales/zhCN.ts +++ b/packages/x-data-grid/src/locales/zhCN.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('zh-CN'); const zhCNGrid: Partial = { // Root @@ -194,10 +200,11 @@ const zhCNGrid: Partial = { paginationRowsPerPage: '每页行数:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} 共 ${count !== -1 ? count : `超过 ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} 共 ${count !== -1 ? formatNumber(count) : `超过 ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `约 ${estimated}` : `超过 ${to}`; - return `${from}–${to} 共 ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to ? `约 ${formatNumber(estimated)}` : `超过 ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} 共 ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/zhHK.ts b/packages/x-data-grid/src/locales/zhHK.ts index f33d37f5fca4f..27bb323003d32 100644 --- a/packages/x-data-grid/src/locales/zhHK.ts +++ b/packages/x-data-grid/src/locales/zhHK.ts @@ -1,5 +1,7 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization } from '../utils/getGridLocalization'; +import { getGridLocalization, buildLocaleFormat } from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('zh-HK'); const zhHKGrid: Partial = { // Root @@ -196,10 +198,11 @@ const zhHKGrid: Partial = { paginationRowsPerPage: '每頁行數:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} 共 ${count !== -1 ? count : `超過 ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} 共 ${count !== -1 ? formatNumber(count) : `超過 ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `約 ${estimated}` : `超過 ${to}`; - return `${from}–${to} 共 ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to ? `約 ${formatNumber(estimated)}` : `超過 ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} 共 ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/locales/zhTW.ts b/packages/x-data-grid/src/locales/zhTW.ts index aeb1e82586c84..308c94b2f89f9 100644 --- a/packages/x-data-grid/src/locales/zhTW.ts +++ b/packages/x-data-grid/src/locales/zhTW.ts @@ -1,5 +1,11 @@ import type { GridLocaleText } from '../models/api/gridLocaleTextApi'; -import { getGridLocalization, type Localization } from '../utils/getGridLocalization'; +import { + getGridLocalization, + type Localization, + buildLocaleFormat, +} from '../utils/getGridLocalization'; + +const formatNumber = buildLocaleFormat('zh-TW'); const zhTWGrid: Partial = { // Root @@ -193,10 +199,11 @@ const zhTWGrid: Partial = { paginationRowsPerPage: '每頁數量:', paginationDisplayedRows: ({ from, to, count, estimated }) => { if (!estimated) { - return `${from}–${to} 共 ${count !== -1 ? count : `超過 ${to}`}`; + return `${formatNumber(from)}–${formatNumber(to)} 共 ${count !== -1 ? formatNumber(count) : `超過 ${formatNumber(to)}`}`; } - const estimatedLabel = estimated && estimated > to ? `約 ${estimated}` : `超過 ${to}`; - return `${from}–${to} 共 ${count !== -1 ? count : estimatedLabel}`; + const estimatedLabel = + estimated && estimated > to ? `約 ${formatNumber(estimated)}` : `超過 ${formatNumber(to)}`; + return `${formatNumber(from)}–${formatNumber(to)} 共 ${count !== -1 ? formatNumber(count) : estimatedLabel}`; }, paginationItemAriaLabel: (type) => { if (type === 'first') { diff --git a/packages/x-data-grid/src/utils/formatNumber.test.ts b/packages/x-data-grid/src/utils/formatNumber.test.ts new file mode 100644 index 0000000000000..01c599a336abe --- /dev/null +++ b/packages/x-data-grid/src/utils/formatNumber.test.ts @@ -0,0 +1,171 @@ +import { formatNumber } from './getGridLocalization'; +import { isJSDOM } from './isJSDOM'; + +describe('formatNumber', () => { + it('should format numbers with thousands separators', () => { + expect(formatNumber(1000)).to.equal('1,000'); + expect(formatNumber(10000)).to.equal('10,000'); + expect(formatNumber(1000000)).to.equal('1,000,000'); + }); + + it('should handle string numbers', () => { + expect(formatNumber('1000')).to.equal('1,000'); + expect(formatNumber('10000')).to.equal('10,000'); + }); + + it('should return original value for non-numeric strings', () => { + expect(formatNumber('invalid')).to.equal('invalid'); + expect(formatNumber('abc123')).to.equal('abc123'); + }); + + it('should handle edge cases', () => { + expect(formatNumber(0)).to.equal('0'); + expect(formatNumber(-1000)).to.equal('-1,000'); + expect(formatNumber(NaN)).to.equal('NaN'); + expect(formatNumber(Infinity)).to.equal('Infinity'); + expect(formatNumber(-Infinity)).to.equal('-Infinity'); + }); + + it('should handle decimal numbers', () => { + expect(formatNumber(1234.56)).to.equal('1,234.56'); + expect(formatNumber(1000.999)).to.equal('1,000.999'); + }); + + it('should handle very large numbers', () => { + expect(formatNumber(1e15)).to.equal('1,000,000,000,000,000'); + }); + + describe('should format numbers according to locale', () => { + it('en-US (comma separator)', () => { + expect(formatNumber(1000, 'en-US')).to.equal('1,000'); + expect(formatNumber(1000000, 'en-US')).to.equal('1,000,000'); + }); + + it('ar-SD (Arabic-Indic numerals)', () => { + expect(formatNumber(1000, 'ar-SD')).to.equal('١٬٠٠٠'); + }); + + it('ca-ES (dot separator)', () => { + expect(formatNumber(1000, 'ca-ES')).to.equal('1.000'); + }); + + it('cs-CZ (non-breaking space separator)', () => { + expect(formatNumber(1000, 'cs-CZ')).to.equal('1\u00a0000'); + }); + + it('de-DE (dot separator)', () => { + expect(formatNumber(1000, 'de-DE')).to.equal('1.000'); + expect(formatNumber(1000000, 'de-DE')).to.equal('1.000.000'); + }); + + it('es-ES (no separator for thousands)', () => { + expect(formatNumber(1000, 'es-ES')).to.equal('1000'); + }); + + it('fr-FR (narrow no-break space separator)', () => { + expect(formatNumber(1000, 'fr-FR')).to.equal('1\u202f000'); + expect(formatNumber(1000000, 'fr-FR')).to.equal('1\u202f000\u202f000'); + }); + + it('he-IL (comma separator)', () => { + expect(formatNumber(1000, 'he-IL')).to.equal('1,000'); + }); + + it('hr-HR (dot separator)', () => { + expect(formatNumber(1000, 'hr-HR')).to.equal('1.000'); + }); + + it('id-ID (dot separator)', () => { + expect(formatNumber(1000, 'id-ID')).to.equal('1.000'); + }); + + it('it-IT (no separator for thousands)', () => { + expect(formatNumber(1000, 'it-IT')).to.equal('1000'); + }); + + it('ja-JP (comma separator)', () => { + expect(formatNumber(1000, 'ja-JP')).to.equal('1,000'); + }); + + it('ko-KR (comma separator)', () => { + expect(formatNumber(1000, 'ko-KR')).to.equal('1,000'); + }); + + it('nb-NO (non-breaking space separator)', () => { + expect(formatNumber(1000, 'nb-NO')).to.equal('1\u00a0000'); + }); + + // Chromium formats nn-NO with commas instead of non-breaking spaces + it.skipIf(!isJSDOM)('nn-NO (non-breaking space separator)', () => { + expect(formatNumber(1000, 'nn-NO')).to.equal('1\u00a0000'); + }); + + it('pl-PL (no separator for thousands)', () => { + expect(formatNumber(1000, 'pl-PL')).to.equal('1000'); + }); + + it('pt-BR (dot separator)', () => { + expect(formatNumber(1000, 'pt-BR')).to.equal('1.000'); + }); + + it('pt-PT (no separator for thousands)', () => { + expect(formatNumber(1000, 'pt-PT')).to.equal('1000'); + }); + + it('sk-SK (non-breaking space separator)', () => { + expect(formatNumber(1000, 'sk-SK')).to.equal('1\u00a0000'); + }); + + it('zh-CN (comma separator)', () => { + expect(formatNumber(1000, 'zh-CN')).to.equal('1,000'); + }); + + it('zh-HK (comma separator)', () => { + expect(formatNumber(1000, 'zh-HK')).to.equal('1,000'); + }); + + it('zh-TW (comma separator)', () => { + expect(formatNumber(1000, 'zh-TW')).to.equal('1,000'); + }); + }); + + describe('when Intl is not available', () => { + let originalIntl: typeof Intl; + + beforeEach(() => { + originalIntl = globalThis.Intl; + // @ts-ignore + delete globalThis.Intl; + }); + + afterEach(() => { + globalThis.Intl = originalIntl; + }); + + it('should fallback to string representation', () => { + expect(formatNumber(1000)).to.equal('1000'); + expect(formatNumber(10000)).to.equal('10000'); + }); + }); + + describe('when Intl.NumberFormat throws', () => { + let originalNumberFormat: typeof Intl.NumberFormat; + + beforeEach(() => { + originalNumberFormat = Intl.NumberFormat; + // @ts-ignore + Intl.NumberFormat = () => { + throw new Error('NumberFormat error'); + }; + }); + + afterEach(() => { + Intl.NumberFormat = originalNumberFormat; + }); + + it('should fallback to string representation', () => { + expect(formatNumber(1000)).to.equal('1000'); + expect(formatNumber(10000)).to.equal('10000'); + }); + }); +}); diff --git a/packages/x-data-grid/src/utils/getGridLocalization.ts b/packages/x-data-grid/src/utils/getGridLocalization.ts index 2b8802e19d532..dbb6b5de003a7 100644 --- a/packages/x-data-grid/src/utils/getGridLocalization.ts +++ b/packages/x-data-grid/src/utils/getGridLocalization.ts @@ -19,3 +19,26 @@ export const getGridLocalization = (gridTranslations: Partial): }, }, }); + +export const formatNumber = (value: number | string, locale?: string): string => { + const numValue = typeof value === 'string' ? Number(value) : value; + + if (!Number.isFinite(numValue)) { + return String(value); + } + + if (typeof Intl !== 'undefined' && Intl.NumberFormat) { + try { + return new Intl.NumberFormat(locale).format(numValue); + } catch { + return String(numValue); + } + } + + return String(numValue); +}; + +// Helper to create formatNumber with a specific locale +export const buildLocaleFormat = (locale: string) => { + return (value: number | string) => formatNumber(value, locale); +};