feat: add language localization support for converting numbers to loc…

…al 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.
KevinVandy · Jan 12, 2025 · 5775e2a · 5775e2a
1 parent 3dbab32
commit 5775e2a
Show file tree

Hide file tree

Showing 43 changed files with 69 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}