Skip to content
+

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.

Press Enter to start editing

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

LocaleBCP 47 language tagImport nameCompletionSource file
Arabic (Sudan)ar-SDarSD
114/122
Edit
Belarusianbe-BYbeBY
88/122
Edit
Bulgarianbg-BGbgBG
Done 🎉
Edit
Chinese (Hong Kong)zh-HKzhHK
114/122
Edit
Chinese (Simplified)zh-CNzhCN
118/122
Edit
Chinese (Taiwan)zh-TWzhTW
114/122
Edit
Croatianhr-HRhrHR
Done 🎉
Edit
Czechcs-CZcsCZ
118/122
Edit
Danishda-DKdaDK
Done 🎉
Edit
Dutchnl-NLnlNL
118/122
Edit
Finnishfi-FIfiFI
118/122
Edit
Frenchfr-FRfrFR
Done 🎉
Edit
Germande-DEdeDE
Done 🎉
Edit
Greekel-GRelGR
114/122
Edit
Hebrewhe-ILheIL
118/122
Edit
Hungarianhu-HUhuHU
116/122
Edit
Icelandicis-ISisIS
114/122
Edit
Italianit-ITitIT
Done 🎉
Edit
Japaneseja-JPjaJP
Done 🎉
Edit
Koreanko-KRkoKR
87/122
Edit
Norwegian (Bokmål)nb-NOnbNO
118/122
Edit
Norwegian (Nynorsk)nn-NOnnNO
118/122
Edit
Persianfa-IRfaIR
118/122
Edit
Polishpl-PLplPL
87/122
Edit
Portuguesept-PTptPT
Done 🎉
Edit
Portuguese (Brazil)pt-BRptBR
Done 🎉
Edit
Romanianro-ROroRO
114/122
Edit
Russianru-RUruRU
118/122
Edit
Slovaksk-SKskSK
117/122
Edit
Spanishes-ESesES
118/122
Edit
Swedishsv-SEsvSE
117/122
Edit
Turkishtr-TRtrTR
118/122
Edit
Ukrainianuk-UAukUA
114/122
Edit
Urdu (Pakistan)ur-PKurPK
114/122
Edit
Vietnamesevi-VNviVN
Done 🎉
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.

Press Enter to start editing