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 ;
```
-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 = ({
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()}`}
+ } ${totalRowCount.toLocaleString(localization.language)}`}
{showFirstButton && (
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 = ({
selectedRowCount > 0 ? (
{localization.selectedCountOfRowCountRowsSelected
- ?.replace('{selectedCount}', selectedRowCount.toLocaleString())
- ?.replace('{rowCount}', totalRowCount.toString())}
+ ?.replace('{selectedCount}', selectedRowCount.toLocaleString(localization.language))
+ ?.replace('{rowCount}', totalRowCount.toLocaleString(localization.language))}
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 = {
};
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 = () => (
+
+);
+
export const PaginationEnabledDefaultNoRowsPerPage = () => (