diff --git a/docs/pages/api-docs/data-grid/grid-api.md b/docs/pages/api-docs/data-grid/grid-api.md
index c1cca1dda7e2..3cdcdfa1ed8a 100644
--- a/docs/pages/api-docs/data-grid/grid-api.md
+++ b/docs/pages/api-docs/data-grid/grid-api.md
@@ -38,7 +38,7 @@ import { GridApi } from '@material-ui/x-grid';
| getEditCellProps | (rowId: GridRowId, field: string) => GridEditCellProps | Gets the input props for the edit cell of a given `rowId` and `field`. |
| getEditCellPropsParams | (rowId: GridRowId, field: string) => GridEditCellPropsParams | Gets the params to be passed when calling `setEditCellProps`. |
| getEditRowsModel | () => GridEditRowsModel | Gets the edit rows model of the grid. |
-| getLocaleText | (key: T) => GridLocaleText[T] | Returns the translation for the `key`. |
+| getLocaleText | (key: T) => GridLocaleText<>[T] | Returns the translation for the `key`. |
| getRow | (id: GridRowId) => GridRowData | Gets the row data with a given id. |
| getRowElement | (id: GridRowId) => null \| HTMLDivElement | Gets the underlying DOM element for a row at the given `id`. |
| getRowIdFromRowIndex | (index: number) => GridRowId | Gets the `GridRowId` of a row at a specific index. |
diff --git a/docs/src/pages/components/data-grid/localization/localization.md b/docs/src/pages/components/data-grid/localization/localization.md
index f9a2345de32b..ac9d65c7e65b 100644
--- a/docs/src/pages/components/data-grid/localization/localization.md
+++ b/docs/src/pages/components/data-grid/localization/localization.md
@@ -42,7 +42,35 @@ const theme = createMuiTheme(
Note that `createMuiTheme` accepts any number of arguments.
If you are already using the [translations of the core components](/guides/localization/#locale-text), you can add `bgBG` as a new argument.
-The same import works with `XGrid` as it's an extension of `DataGrid`.
+The same import works for `XGrid` as it's an extension of `DataGrid`.
+
+```jsx
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { DataGrid, bgBG } from '@material-ui/data-grid';
+import { bgBG as coreBgBG } from '@material-ui/core/locale';
+
+const theme = createMuiTheme(
+ {
+ palette: {
+ primary: { main: '#1976d2' },
+ },
+ },
+ bgBG,
+ coreBgBG,
+);
+
+
+
+;
+```
+
+If you want to pass language translations directly to the grid without using `createMuiTheme` and `ThemeProvider`, you can directly load the language translations from the `@material-ui/data-grid` or `@material-ui/x-grid` package.
+
+```jsx
+import { DataGrid, nlNL } from '@material-ui/data-grid';
+
+;
+```
### Supported locales
diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx
index fa633562b182..272ffa4d018b 100644
--- a/packages/grid/_modules_/grid/components/GridPagination.tsx
+++ b/packages/grid/_modules_/grid/components/GridPagination.tsx
@@ -97,6 +97,7 @@ export const GridPagination = React.forwardRef<
: []
}
rowsPerPage={paginationState.pageSize}
+ {...apiRef!.current.getLocaleText('MuiTablePagination')}
{...getPaginationChangeHandlers()}
{...props}
/>
diff --git a/packages/grid/_modules_/grid/constants/localeTextConstants.ts b/packages/grid/_modules_/grid/constants/localeTextConstants.ts
index 6798b707a6e8..d53b154e55d7 100644
--- a/packages/grid/_modules_/grid/constants/localeTextConstants.ts
+++ b/packages/grid/_modules_/grid/constants/localeTextConstants.ts
@@ -98,4 +98,7 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
// Boolean cell text
booleanCellTrueLabel: 'true',
booleanCellFalseLabel: 'false',
+
+ // Used core components translation keys
+ MuiTablePagination: {},
};
diff --git a/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts b/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts
index ac0a1085d667..73e10a626601 100644
--- a/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts
+++ b/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts
@@ -1,7 +1,12 @@
+import { Localization as CoreLocalization } from '@material-ui/core/locale';
+
+// @ts-expect-error We have different structure in v5
+type MuiComponentsLocalization = CoreLocalization['props'] | CoreLocalization['components'];
+
/**
* Set the types of the texts in the grid.
*/
-export interface GridLocaleText {
+export interface GridLocaleText extends Partial {
// Root
noRowsLabel: string;
noResultsOverlayLabel: string;
diff --git a/packages/grid/_modules_/grid/utils/getGridLocalization.ts b/packages/grid/_modules_/grid/utils/getGridLocalization.ts
index 42759d3fa4b3..370cd8a7c93a 100644
--- a/packages/grid/_modules_/grid/utils/getGridLocalization.ts
+++ b/packages/grid/_modules_/grid/utils/getGridLocalization.ts
@@ -27,10 +27,12 @@ export const getGridLocalization = (
components: {
MuiDataGrid: {
defaultProps: {
- localeText: gridTranslations,
+ localeText: {
+ ...gridTranslations,
+ MuiTablePagination: coreTranslations?.components?.MuiTablePagination,
+ },
},
},
- ...coreTranslations?.components,
},
};
}
@@ -38,9 +40,11 @@ export const getGridLocalization = (
return {
props: {
MuiDataGrid: {
- localeText: gridTranslations,
+ localeText: {
+ ...gridTranslations,
+ MuiTablePagination: coreTranslations?.props?.MuiTablePagination,
+ },
},
- ...coreTranslations?.props,
},
};
};