Data grid - Localization
The data grid allows to support users from different locales, with formatting, RTL, and localized strings.
The default locale of MUI is English (United States). If you want to use other locales, follow the instructions below.
Translation keys
You can use the localeText
prop to pass in your own text and translations.
You can find all the translation keys supported in the source
in the GitHub repository.
In the following example, the labels of the density selector are customized.
Locale text
The default locale of MUI is English (United States).
You can use the theme to configure the locale text:
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DataGrid, bgBG } from '@mui/x-data-grid';
const theme = createTheme(
{
palette: {
primary: { main: '#1976d2' },
},
},
bgBG,
);
<ThemeProvider theme={theme}>
<DataGrid />
</ThemeProvider>;
Note that createTheme
accepts any number of arguments.
If you are already using the translations of the core components, you can add bgBG
as a new argument.
The same import works for DataGridPro
as it's an extension of DataGrid
.
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DataGrid, bgBG } from '@mui/x-data-grid';
import { bgBG as pickersBgBG } from '@mui/x-date-pickers';
import { bgBG as coreBgBG } from '@mui/material/locale';
const theme = createTheme(
{
palette: {
primary: { main: '#1976d2' },
},
},
bgBG, // x-data-grid translations
pickersBgBG, // x-date-pickers translations
coreBgBG, // core translations
);
<ThemeProvider theme={theme}>
<DataGrid />
</ThemeProvider>;
If you want to pass language translations directly to the grid without using createTheme
and ThemeProvider
, you can directly load the language translations from the @mui/x-data-grid
or @mui/x-data-grid-pro
package.
import { DataGrid, nlNL } from '@mui/x-data-grid';
<DataGrid localeText={nlNL.components.MuiDataGrid.defaultProps.localeText} />;
Supported locales
Locale | BCP 47 language tag | Import name | Completion | Related file |
---|---|---|---|---|
Arabic (Sudan) | ar-SD | arSD | 80/93 | Edit |
Bulgarian | bg-BG | bgBG | 80/93 | Edit |
Chinese (Simplified) | zh-CN | zhCN | 93/93 | Edit |
Chinese (Taiwan) | zh-TW | zhTW | 87/93 | Edit |
Czech | cs-CZ | csCZ | 73/93 | Edit |
Danish | da-DK | daDK | 80/93 | Edit |
Dutch | nl-NL | nlNL | 86/93 | Edit |
Finnish | fi-FI | fiFI | 93/93 | Edit |
French | fr-FR | frFR | 87/93 | Edit |
German | de-DE | deDE | 93/93 | Edit |
Greek | el-GR | elGR | 57/93 | Edit |
Hebrew | he-IL | heIL | 86/93 | Edit |
Hungarian | hu-HU | huHU | 81/93 | Edit |
Italian | it-IT | itIT | 87/93 | Edit |
Japanese | ja-JP | jaJP | 81/93 | Edit |
Korean | ko-KR | koKR | 93/93 | Edit |
Norwegian (bokmål) | nb-NO | nbNO | 86/93 | Edit |
Persian | fa-IR | faIR | 93/93 | Edit |
Polish | pl-PL | plPL | 86/93 | Edit |
Portuguese (Brazil) | pt-BR | ptBR | 87/93 | Edit |
Romanian | ro-RO | roRO | 87/93 | Edit |
Russian | ru-RU | ruRU | 93/93 | Edit |
Slovak | sk-SK | skSK | 87/93 | Edit |
Spanish | es-ES | esES | 81/93 | Edit |
Swedish | sv-SE | svSE | 86/93 | Edit |
Turkish | tr-TR | trTR | 93/93 | Edit |
Ukrainian | uk-UA | ukUA | 88/93 | Edit |
Vietnamese | vi-VN | viVN | 70/93 | Edit |
You can find the source in the GitHub repository.
To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there. Note that these translations of the Data grid component depend on the Localization strategy of the whole library.