feat: add language localization support for converting numbers to local string (#1359)

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.

Author: fredericbahr

apps/material-react-table-docs/pages/docs/guides/localization.mdx

@@ -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}>

packages/material-react-table/src/components/toolbar/MRT_TablePagination.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)

packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_AR: MRT_Localization = {
+  language: 'ar',
   actions: 'إجراءات',
   and: 'و',
   cancel: 'إلغاء',

packages/material-react-table/src/locales/ar.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',

packages/material-react-table/src/locales/az.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_BG: MRT_Localization = {
+  language: 'bg',
   actions: 'Действия',
   and: 'и',
   cancel: 'Отказ',

packages/material-react-table/src/locales/bg.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',

packages/material-react-table/src/locales/cs.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',

packages/material-react-table/src/locales/da.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',

packages/material-react-table/src/locales/de.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_EL: MRT_Localization = {
+  language: 'el',
   actions: 'Ενέργειες',
   and: 'και',
   cancel: 'Ακύρωση',