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, }, }; };