Skip to content

Data Grid - Localization

The data grid allows to support users from different locales, with formatting, 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.

Press Enter to start editing

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

LocaleBCP 47 language tagImport nameCompletionRelated file
Arabic (Sudan)ar-SDarSD
79/93
Edit
Belarusianbe-BYbeBY
93/93
Edit
Bulgarianbg-BGbgBG
79/93
Edit
Chinese (Simplified)zh-CNzhCN
92/93
Edit
Chinese (Taiwan)zh-TWzhTW
86/93
Edit
Czechcs-CZcsCZ
72/93
Edit
Danishda-DKdaDK
79/93
Edit
Dutchnl-NLnlNL
85/93
Edit
Finnishfi-FIfiFI
92/93
Edit
Frenchfr-FRfrFR
86/93
Edit
Germande-DEdeDE
92/93
Edit
Greekel-GRelGR
56/93
Edit
Hebrewhe-ILheIL
84/93
Edit
Hungarianhu-HUhuHU
80/93
Edit
Italianit-ITitIT
86/93
Edit
Japaneseja-JPjaJP
93/93
Edit
Koreanko-KRkoKR
92/93
Edit
Norwegian (bokmål)nb-NOnbNO
85/93
Edit
Persianfa-IRfaIR
92/93
Edit
Polishpl-PLplPL
85/93
Edit
Portuguese (Brazil)pt-BRptBR
86/93
Edit
Romanianro-ROroRO
86/93
Edit
Russianru-RUruRU
92/93
Edit
Slovaksk-SKskSK
92/93
Edit
Spanishes-ESesES
92/93
Edit
Swedishsv-SEsvSE
92/93
Edit
Turkishtr-TRtrTR
92/93
Edit
Ukrainianuk-UAukUA
87/93
Edit
Urdu (Pakistan)ur-PKurPK
93/93
Edit
Vietnamesevi-VNviVN
85/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.

🚧 RTL Support

API