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