Data Grid - Translated components
The Data Grid allows to support users from different locales, with formatting, and localized strings.
The default locale of MUI X 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 X is English (United States).
You can use the theme to configure the locale text:
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DataGrid } from '@mui/x-data-grid';
import { bgBG } from '@mui/x-data-grid/locales';
// Or import { bgBG } from '@mui/x-data-grid-pro/locales';
// Or import { bgBG } from '@mui/x-data-grid-premium/locales';
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 Data Grid Pro as it's an extension of Data Grid.
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DataGrid } from '@mui/x-data-grid';
import { bgBG } from '@mui/x-data-grid/locales';
import { bgBG as pickersBgBG } from '@mui/x-date-pickers/locales';
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 Data Grid without using createTheme
and ThemeProvider
, you can directly load the language translations from @mui/x-data-grid/locales
.
import { DataGrid } from '@mui/x-data-grid';
import { nlNL } from '@mui/x-data-grid/locales';
<DataGrid localeText={nlNL.components.MuiDataGrid.defaultProps.localeText} />;
Supported locales
Locale | BCP 47 language tag | Import name | Completion | Source file |
---|---|---|---|---|
Arabic (Sudan) | ar-SD | arSD | 114/123 | Edit |
Belarusian | be-BY | beBY | 88/123 | Edit |
Bulgarian | bg-BG | bgBG | 122/123 | Edit |
Chinese (Hong Kong) | zh-HK | zhHK | 114/123 | Edit |
Chinese (Simplified) | zh-CN | zhCN | Done 🎉 | Edit |
Chinese (Taiwan) | zh-TW | zhTW | 114/123 | Edit |
Croatian | hr-HR | hrHR | 122/123 | Edit |
Czech | cs-CZ | csCZ | 118/123 | Edit |
Danish | da-DK | daDK | 122/123 | Edit |
Dutch | nl-NL | nlNL | 118/123 | Edit |
Finnish | fi-FI | fiFI | 118/123 | Edit |
French | fr-FR | frFR | 122/123 | Edit |
German | de-DE | deDE | Done 🎉 | Edit |
Greek | el-GR | elGR | 114/123 | Edit |
Hebrew | he-IL | heIL | 118/123 | Edit |
Hungarian | hu-HU | huHU | 116/123 | Edit |
Icelandic | is-IS | isIS | 114/123 | Edit |
Italian | it-IT | itIT | 122/123 | Edit |
Japanese | ja-JP | jaJP | 122/123 | Edit |
Korean | ko-KR | koKR | 87/123 | Edit |
Norwegian (Bokmål) | nb-NO | nbNO | 118/123 | Edit |
Norwegian (Nynorsk) | nn-NO | nnNO | 118/123 | Edit |
Persian | fa-IR | faIR | 118/123 | Edit |
Polish | pl-PL | plPL | 87/123 | Edit |
Portuguese | pt-PT | ptPT | Done 🎉 | Edit |
Portuguese (Brazil) | pt-BR | ptBR | Done 🎉 | Edit |
Romanian | ro-RO | roRO | 114/123 | Edit |
Russian | ru-RU | ruRU | 118/123 | Edit |
Slovak | sk-SK | skSK | 117/123 | Edit |
Spanish | es-ES | esES | Done 🎉 | Edit |
Swedish | sv-SE | svSE | 122/123 | Edit |
Turkish | tr-TR | trTR | 120/123 | Edit |
Ukrainian | uk-UA | ukUA | 114/123 | Edit |
Urdu (Pakistan) | ur-PK | urPK | 114/123 | Edit |
Vietnamese | vi-VN | viVN | 122/123 | 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.
RTL Support
Right-to-left languages such as Arabic, Persian, or Hebrew are supported. Follow this guide to use them.
The example below demonstrates how to use an RTL language (Arabic) with the Data Grid.