From 5775e2a1aa8c4826d1b7578d300f5e321ceb7ceb Mon Sep 17 00:00:00 2001
From: Frederic Bahr <fredericbahr1@gmail.com>
Date: Thu, 9 Jan 2025 20:05:02 +0100
Subject: [PATCH] feat: add language localization support for converting
 numbers to local string

This explicitly tells the `toLocaleString` function which language to use based on the provided localization instead of relying on the browser language. This allows a correct formatting of numbers within a multi language app.
---
 .../pages/docs/guides/localization.mdx        |  4 +++-
 .../toolbar/MRT_TablePagination.tsx           |  8 +++++---
 .../toolbar/MRT_ToolbarAlertBanner.tsx        |  4 ++--
 .../material-react-table/src/locales/ar.ts    |  1 +
 .../material-react-table/src/locales/az.ts    |  1 +
 .../material-react-table/src/locales/bg.ts    |  1 +
 .../material-react-table/src/locales/cs.ts    |  1 +
 .../material-react-table/src/locales/da.ts    |  1 +
 .../material-react-table/src/locales/de.ts    |  1 +
 .../material-react-table/src/locales/el.ts    |  1 +
 .../material-react-table/src/locales/en.ts    |  1 +
 .../material-react-table/src/locales/es.ts    |  1 +
 .../material-react-table/src/locales/et.ts    |  1 +
 .../material-react-table/src/locales/fa.ts    |  1 +
 .../material-react-table/src/locales/fi.ts    |  1 +
 .../material-react-table/src/locales/fr.ts    |  1 +
 .../material-react-table/src/locales/he.ts    |  1 +
 .../material-react-table/src/locales/hr.ts    |  1 +
 .../material-react-table/src/locales/hu.ts    |  1 +
 .../material-react-table/src/locales/hy.ts    |  1 +
 .../material-react-table/src/locales/id.ts    |  1 +
 .../material-react-table/src/locales/it.ts    |  1 +
 .../material-react-table/src/locales/ja.ts    |  1 +
 .../material-react-table/src/locales/ko.ts    |  1 +
 .../material-react-table/src/locales/nl.ts    |  1 +
 .../material-react-table/src/locales/no.ts    |  1 +
 .../material-react-table/src/locales/np.ts    |  1 +
 .../material-react-table/src/locales/pl.ts    |  1 +
 .../material-react-table/src/locales/pt-BR.ts |  1 +
 .../material-react-table/src/locales/pt.ts    |  1 +
 .../material-react-table/src/locales/ro.ts    |  1 +
 .../material-react-table/src/locales/ru.ts    |  1 +
 .../material-react-table/src/locales/sk.ts    |  1 +
 .../src/locales/sr-Cyrl-RS.ts                 |  1 +
 .../src/locales/sr-Latn-RS.ts                 |  1 +
 .../material-react-table/src/locales/sv.ts    |  1 +
 .../material-react-table/src/locales/tr.ts    |  1 +
 .../material-react-table/src/locales/uk.ts    |  1 +
 .../material-react-table/src/locales/vi.ts    |  1 +
 .../src/locales/zh-Hans.ts                    |  1 +
 .../src/locales/zh-Hant.ts                    |  1 +
 packages/material-react-table/src/types.ts    |  2 ++
 .../stories/features/Pagination.stories.tsx   | 19 +++++++++++++++++++
 43 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/apps/material-react-table-docs/pages/docs/guides/localization.mdx b/apps/material-react-table-docs/pages/docs/guides/localization.mdx
index 9b9987094..a1be99f26 100644
--- a/apps/material-react-table-docs/pages/docs/guides/localization.mdx
+++ b/apps/material-react-table-docs/pages/docs/guides/localization.mdx
@@ -44,6 +44,7 @@ const table = useMaterialReactTable({
   columns,
   data,
   localization: {
+    language: 'pt', // BCP 47 language tag for number formatting
     actions: 'Ações',
     and: 'e',
     cancel: 'Cancelar',
@@ -60,6 +61,7 @@ const table = useMaterialReactTable({
 return <MaterialReactTable table={table} />;
 ```
 
-For a full list of all available translation keys, see [here](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/locales/en.ts)
+For a full list of all available translation keys, see [here](https://github.com/KevinVandy/material-react-table/blob/v3/packages/material-react-table/src/locales/en.ts).
+Please note that each localization object should include a `language` property containing a valid BCP 47 language tag to ensure proper number formatting.
 
 If you end up fully translating MRT into another language that is not yet supported, please consider making a PR to add it to the library so that everyone can use it!
diff --git a/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx b/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx
index 1bc28e1a8..70018613c 100644
--- a/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx
+++ b/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx
@@ -174,10 +174,12 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             sx={{ m: '0 4px', minWidth: '8ch' }}
             variant="body2"
           >{`${
-            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
-          }-${lastRowIndex.toLocaleString()} ${
+            lastRowIndex === 0
+              ? 0
+              : (firstRowIndex + 1).toLocaleString(localization.language)
+          }-${lastRowIndex.toLocaleString(localization.language)} ${
             localization.of
-          } ${totalRowCount.toLocaleString()}`}</Typography>
+          } ${totalRowCount.toLocaleString(localization.language)}`}</Typography>
           <Box gap="xs">
             {showFirstButton && (
               <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
diff --git a/packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx b/packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx
index 47f918bdf..778f9f6d6 100644
--- a/packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx
+++ b/packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx
@@ -65,8 +65,8 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     selectedRowCount > 0 ? (
       <Stack alignItems="center" direction="row" gap="16px">
         {localization.selectedCountOfRowCountRowsSelected
-          ?.replace('{selectedCount}', selectedRowCount.toLocaleString())
-          ?.replace('{rowCount}', totalRowCount.toString())}
+          ?.replace('{selectedCount}', selectedRowCount.toLocaleString(localization.language))
+          ?.replace('{rowCount}', totalRowCount.toLocaleString(localization.language))}
         <Button
           onClick={(event) =>
             getMRT_SelectAllHandler({ table })(event, false, true)
diff --git a/packages/material-react-table/src/locales/ar.ts b/packages/material-react-table/src/locales/ar.ts
index d03f648ff..c586002d0 100644
--- a/packages/material-react-table/src/locales/ar.ts
+++ b/packages/material-react-table/src/locales/ar.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_AR: MRT_Localization = {
+  language: 'ar',
   actions: 'إجراءات',
   and: 'و',
   cancel: 'إلغاء',
diff --git a/packages/material-react-table/src/locales/az.ts b/packages/material-react-table/src/locales/az.ts
index ceb6bab31..1dd8809bb 100644
--- a/packages/material-react-table/src/locales/az.ts
+++ b/packages/material-react-table/src/locales/az.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_AZ: MRT_Localization = {
+  language: 'az',
   actions: 'Əməliyyatlar',
   and: 'və',
   cancel: 'Ləğv Et',
diff --git a/packages/material-react-table/src/locales/bg.ts b/packages/material-react-table/src/locales/bg.ts
index ca22e3a3b..7b2541a9b 100644
--- a/packages/material-react-table/src/locales/bg.ts
+++ b/packages/material-react-table/src/locales/bg.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_BG: MRT_Localization = {
+  language: 'bg',
   actions: 'Действия',
   and: 'и',
   cancel: 'Отказ',
diff --git a/packages/material-react-table/src/locales/cs.ts b/packages/material-react-table/src/locales/cs.ts
index bf61b118c..6c1ff7d1f 100644
--- a/packages/material-react-table/src/locales/cs.ts
+++ b/packages/material-react-table/src/locales/cs.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_CS: MRT_Localization = {
+  language: 'cs',
   actions: 'Akce',
   and: 'a',
   cancel: 'Zrušit',
diff --git a/packages/material-react-table/src/locales/da.ts b/packages/material-react-table/src/locales/da.ts
index ae42d85e2..9313a20f7 100644
--- a/packages/material-react-table/src/locales/da.ts
+++ b/packages/material-react-table/src/locales/da.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_DA: MRT_Localization = {
+  language: 'da',
   actions: 'Handlinger',
   and: 'og',
   cancel: 'Annuller',
diff --git a/packages/material-react-table/src/locales/de.ts b/packages/material-react-table/src/locales/de.ts
index 6888ac592..933d92488 100644
--- a/packages/material-react-table/src/locales/de.ts
+++ b/packages/material-react-table/src/locales/de.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_DE: MRT_Localization = {
+  language: 'de',
   actions: 'Aktionen',
   and: 'und',
   cancel: 'Abbrechen',
diff --git a/packages/material-react-table/src/locales/el.ts b/packages/material-react-table/src/locales/el.ts
index 67a63fae7..7c2aeb545 100644
--- a/packages/material-react-table/src/locales/el.ts
+++ b/packages/material-react-table/src/locales/el.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_EL: MRT_Localization = {
+  language: 'el',
   actions: 'Ενέργειες',
   and: 'και',
   cancel: 'Ακύρωση',
diff --git a/packages/material-react-table/src/locales/en.ts b/packages/material-react-table/src/locales/en.ts
index 0145ecdad..cb62568bf 100644
--- a/packages/material-react-table/src/locales/en.ts
+++ b/packages/material-react-table/src/locales/en.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_EN: MRT_Localization = {
+  language: 'en',
   actions: 'Actions',
   and: 'and',
   cancel: 'Cancel',
diff --git a/packages/material-react-table/src/locales/es.ts b/packages/material-react-table/src/locales/es.ts
index 7196b8600..49d774b2e 100644
--- a/packages/material-react-table/src/locales/es.ts
+++ b/packages/material-react-table/src/locales/es.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ES: MRT_Localization = {
+  language: 'es',
   actions: 'Acciones',
   and: 'y',
   cancel: 'Cancelar',
diff --git a/packages/material-react-table/src/locales/et.ts b/packages/material-react-table/src/locales/et.ts
index 07ef0d4c4..ba8c772e9 100644
--- a/packages/material-react-table/src/locales/et.ts
+++ b/packages/material-react-table/src/locales/et.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ET: MRT_Localization = {
+  language: 'et',
   actions: 'Toimingud',
   and: 'ja',
   cancel: 'Tühista',
diff --git a/packages/material-react-table/src/locales/fa.ts b/packages/material-react-table/src/locales/fa.ts
index 133121830..f69c5d2c3 100644
--- a/packages/material-react-table/src/locales/fa.ts
+++ b/packages/material-react-table/src/locales/fa.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_FA: MRT_Localization = {
+  language: 'fa',
   actions: 'عملیات',
   and: 'و',
   cancel: 'انصراف',
diff --git a/packages/material-react-table/src/locales/fi.ts b/packages/material-react-table/src/locales/fi.ts
index a14f874f5..0aae313e7 100644
--- a/packages/material-react-table/src/locales/fi.ts
+++ b/packages/material-react-table/src/locales/fi.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_FI: MRT_Localization = {
+  language: 'fi',
   actions: 'Toiminnot',
   and: 'ja',
   cancel: 'Peruuta',
diff --git a/packages/material-react-table/src/locales/fr.ts b/packages/material-react-table/src/locales/fr.ts
index edf308ff4..08909c318 100644
--- a/packages/material-react-table/src/locales/fr.ts
+++ b/packages/material-react-table/src/locales/fr.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_FR: MRT_Localization = {
+  language: 'fr',
   actions: 'Actions',
   and: 'et',
   cancel: 'Annuler',
diff --git a/packages/material-react-table/src/locales/he.ts b/packages/material-react-table/src/locales/he.ts
index 9b9880751..5427ef9ee 100644
--- a/packages/material-react-table/src/locales/he.ts
+++ b/packages/material-react-table/src/locales/he.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HE: MRT_Localization = {
+  language: 'he',
   actions: 'פעולות',
   and: 'ו',
   cancel: 'ביטול',
diff --git a/packages/material-react-table/src/locales/hr.ts b/packages/material-react-table/src/locales/hr.ts
index 9bd026087..d87324ba0 100644
--- a/packages/material-react-table/src/locales/hr.ts
+++ b/packages/material-react-table/src/locales/hr.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HR: MRT_Localization = {
+  language: 'hr',
   actions: 'Radnje',
   and: 'i',
   cancel: 'Odustani',
diff --git a/packages/material-react-table/src/locales/hu.ts b/packages/material-react-table/src/locales/hu.ts
index b079c4e53..4250a1c31 100644
--- a/packages/material-react-table/src/locales/hu.ts
+++ b/packages/material-react-table/src/locales/hu.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HU: MRT_Localization = {
+  language: 'hu',
   actions: 'Műveletek',
   and: 'és',
   cancel: 'Mégse',
diff --git a/packages/material-react-table/src/locales/hy.ts b/packages/material-react-table/src/locales/hy.ts
index 3e3bcd1a0..788444b04 100644
--- a/packages/material-react-table/src/locales/hy.ts
+++ b/packages/material-react-table/src/locales/hy.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HY: MRT_Localization = {
+  language: 'hy',
   actions: 'Գործողություններ',
   and: 'և',
   cancel: 'Չեղարկել',
diff --git a/packages/material-react-table/src/locales/id.ts b/packages/material-react-table/src/locales/id.ts
index c1dfd2a00..cc5419b8a 100644
--- a/packages/material-react-table/src/locales/id.ts
+++ b/packages/material-react-table/src/locales/id.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ID: MRT_Localization = {
+  language: 'id',
   actions: 'Aksi',
   and: 'dan',
   cancel: 'Batal',
diff --git a/packages/material-react-table/src/locales/it.ts b/packages/material-react-table/src/locales/it.ts
index 3a78ae781..fc2d94bc8 100644
--- a/packages/material-react-table/src/locales/it.ts
+++ b/packages/material-react-table/src/locales/it.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_IT: MRT_Localization = {
+  language: 'it',
   actions: 'Azioni',
   and: 'e',
   cancel: 'Cancella',
diff --git a/packages/material-react-table/src/locales/ja.ts b/packages/material-react-table/src/locales/ja.ts
index 4a47cf704..601b66c10 100644
--- a/packages/material-react-table/src/locales/ja.ts
+++ b/packages/material-react-table/src/locales/ja.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_JA: MRT_Localization = {
+  language: 'ja',
   actions: '操作',
   and: 'と',
   cancel: 'キャンセル',
diff --git a/packages/material-react-table/src/locales/ko.ts b/packages/material-react-table/src/locales/ko.ts
index a95919c02..fe7f6cfbd 100644
--- a/packages/material-react-table/src/locales/ko.ts
+++ b/packages/material-react-table/src/locales/ko.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_KO: MRT_Localization = {
+  language: 'ko',
   actions: '동작',
   and: '~',
   cancel: '취소',
diff --git a/packages/material-react-table/src/locales/nl.ts b/packages/material-react-table/src/locales/nl.ts
index f7ca98ccc..3c91bcd6b 100644
--- a/packages/material-react-table/src/locales/nl.ts
+++ b/packages/material-react-table/src/locales/nl.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NL: MRT_Localization = {
+  language: 'nl',
   actions: 'Acties',
   and: 'en',
   cancel: 'Annuleren',
diff --git a/packages/material-react-table/src/locales/no.ts b/packages/material-react-table/src/locales/no.ts
index a6455cef0..ebc1962e1 100644
--- a/packages/material-react-table/src/locales/no.ts
+++ b/packages/material-react-table/src/locales/no.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NO: MRT_Localization = {
+  language: 'no',
   cancel: 'Avbryt',
   actions: 'Handlinger',
   and: 'og',
diff --git a/packages/material-react-table/src/locales/np.ts b/packages/material-react-table/src/locales/np.ts
index b01f6c809..74dffa1d0 100644
--- a/packages/material-react-table/src/locales/np.ts
+++ b/packages/material-react-table/src/locales/np.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NP: MRT_Localization = {
+  language: 'np',
   actions: 'कार्यहरू',
   and: 'तथा',
   cancel: 'रद्द गर्नुहोस्',
diff --git a/packages/material-react-table/src/locales/pl.ts b/packages/material-react-table/src/locales/pl.ts
index f95d560e8..fb0dc2106 100644
--- a/packages/material-react-table/src/locales/pl.ts
+++ b/packages/material-react-table/src/locales/pl.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_PL: MRT_Localization = {
+  language: 'pl',
   actions: 'Akcje',
   and: 'i',
   cancel: 'Anuluj',
diff --git a/packages/material-react-table/src/locales/pt-BR.ts b/packages/material-react-table/src/locales/pt-BR.ts
index 06a6d4b18..9568ad1cc 100644
--- a/packages/material-react-table/src/locales/pt-BR.ts
+++ b/packages/material-react-table/src/locales/pt-BR.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_PT_BR: MRT_Localization = {
+  language: 'pt-BR',
   actions: 'Ações',
   and: 'e',
   cancel: 'Cancelar',
diff --git a/packages/material-react-table/src/locales/pt.ts b/packages/material-react-table/src/locales/pt.ts
index 5e4175d3f..dbb9c3230 100644
--- a/packages/material-react-table/src/locales/pt.ts
+++ b/packages/material-react-table/src/locales/pt.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_PT: MRT_Localization = {
+  language: 'pt',
   actions: 'Ações',
   and: 'e',
   cancel: 'Cancelar',
diff --git a/packages/material-react-table/src/locales/ro.ts b/packages/material-react-table/src/locales/ro.ts
index a4156a785..6c30a1b35 100644
--- a/packages/material-react-table/src/locales/ro.ts
+++ b/packages/material-react-table/src/locales/ro.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_RO: MRT_Localization = {
+  language: 'ro',
   actions: 'Acțiuni',
   and: 'și',
   cancel: 'Anulează',
diff --git a/packages/material-react-table/src/locales/ru.ts b/packages/material-react-table/src/locales/ru.ts
index c1d5ebeee..5186bc2e9 100644
--- a/packages/material-react-table/src/locales/ru.ts
+++ b/packages/material-react-table/src/locales/ru.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_RU: MRT_Localization = {
+  language: 'ru',
   actions: 'Действия',
   and: 'и',
   cancel: 'Отменить',
diff --git a/packages/material-react-table/src/locales/sk.ts b/packages/material-react-table/src/locales/sk.ts
index 9cca7d45c..7dc0d7d6b 100644
--- a/packages/material-react-table/src/locales/sk.ts
+++ b/packages/material-react-table/src/locales/sk.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SK: MRT_Localization = {
+  language: 'sk',
   actions: 'Akcie',
   and: 'a',
   cancel: 'Zrušiť',
diff --git a/packages/material-react-table/src/locales/sr-Cyrl-RS.ts b/packages/material-react-table/src/locales/sr-Cyrl-RS.ts
index b5dc82c48..eb8acedae 100644
--- a/packages/material-react-table/src/locales/sr-Cyrl-RS.ts
+++ b/packages/material-react-table/src/locales/sr-Cyrl-RS.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SR_CYRL_RS: MRT_Localization = {
+  language: 'sr-Cyrl-RS',
   actions: 'Акције',
   and: 'и',
   cancel: 'Откажи',
diff --git a/packages/material-react-table/src/locales/sr-Latn-RS.ts b/packages/material-react-table/src/locales/sr-Latn-RS.ts
index e5e9b7a35..31112440c 100644
--- a/packages/material-react-table/src/locales/sr-Latn-RS.ts
+++ b/packages/material-react-table/src/locales/sr-Latn-RS.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SR_LATN_RS: MRT_Localization = {
+  language: 'sr-Latn-RS',
   actions: 'Akcije',
   and: 'i',
   cancel: 'Otkaži',
diff --git a/packages/material-react-table/src/locales/sv.ts b/packages/material-react-table/src/locales/sv.ts
index bb347b8ce..33c964062 100644
--- a/packages/material-react-table/src/locales/sv.ts
+++ b/packages/material-react-table/src/locales/sv.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SV: MRT_Localization = {
+  language: 'sv',
   actions: 'Åtgärder',
   and: 'och',
   cancel: 'Avbryt',
diff --git a/packages/material-react-table/src/locales/tr.ts b/packages/material-react-table/src/locales/tr.ts
index 5d5eb7ec9..335a5016c 100644
--- a/packages/material-react-table/src/locales/tr.ts
+++ b/packages/material-react-table/src/locales/tr.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_TR: MRT_Localization = {
+  language: 'tr',
   actions: 'İşlemler',
   and: 've',
   cancel: 'İptal',
diff --git a/packages/material-react-table/src/locales/uk.ts b/packages/material-react-table/src/locales/uk.ts
index c4f2ab59e..ce46b9d64 100644
--- a/packages/material-react-table/src/locales/uk.ts
+++ b/packages/material-react-table/src/locales/uk.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_UK: MRT_Localization = {
+  language: 'uk',
   actions: 'Дії',
   and: 'і',
   cancel: 'Скасувати',
diff --git a/packages/material-react-table/src/locales/vi.ts b/packages/material-react-table/src/locales/vi.ts
index 5ea0aff66..7d52f86cd 100644
--- a/packages/material-react-table/src/locales/vi.ts
+++ b/packages/material-react-table/src/locales/vi.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_VI: MRT_Localization = {
+  language: 'vi',
   actions: 'Thao tác',
   and: 'và',
   cancel: 'Huỷ bỏ',
diff --git a/packages/material-react-table/src/locales/zh-Hans.ts b/packages/material-react-table/src/locales/zh-Hans.ts
index 053cdfbf1..9b4edcaa1 100644
--- a/packages/material-react-table/src/locales/zh-Hans.ts
+++ b/packages/material-react-table/src/locales/zh-Hans.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ZH_HANS: MRT_Localization = {
+  language: 'zh-Hans',
   actions: '操作',
   and: '与',
   cancel: '取消',
diff --git a/packages/material-react-table/src/locales/zh-Hant.ts b/packages/material-react-table/src/locales/zh-Hant.ts
index b1af22362..1beecb882 100644
--- a/packages/material-react-table/src/locales/zh-Hant.ts
+++ b/packages/material-react-table/src/locales/zh-Hant.ts
@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ZH_HANT: MRT_Localization = {
+  language: 'zh-Hant',
   actions: '動作',
   and: '與',
   cancel: '取消',
diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts
index 623435f49..e10b4a25c 100644
--- a/packages/material-react-table/src/types.ts
+++ b/packages/material-react-table/src/types.ts
@@ -150,6 +150,8 @@ export type MRT_ColumnHelper<TData extends MRT_RowData> = {
 };
 
 export interface MRT_Localization {
+  // language of the localization as BCP 47 language tag for number formatting
+  language: string;
   actions: string;
   and: string;
   cancel: string;
diff --git a/packages/material-react-table/stories/features/Pagination.stories.tsx b/packages/material-react-table/stories/features/Pagination.stories.tsx
index ca4f54157..5449516f0 100644
--- a/packages/material-react-table/stories/features/Pagination.stories.tsx
+++ b/packages/material-react-table/stories/features/Pagination.stories.tsx
@@ -78,6 +78,25 @@ export const PaginationEnabledDefaultBigData = () => (
   />
 );
 
+export const PaginationEnabledDefaultBigDataLanguage = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={bigData}
+    enableRowVirtualization
+    localization={{
+      language: navigator.language.startsWith('de') ? 'en' : 'de',
+    }}
+    enableRowSelection
+    initialState={{ pagination: { pageIndex: 0, pageSize: 1000 } }}
+    muiPaginationProps={{ rowsPerPageOptions: [100, 1000] }}
+    muiTableContainerProps={{
+      sx: {
+        height: '600px',
+      },
+    }}
+  />
+);
+
 export const PaginationEnabledDefaultNoRowsPerPage = () => (
   <MaterialReactTable
     columns={columns}