Skip to content

Data Grid - Localization

The Date Grid will support users from different locale, with formating, RTL, and localized strings.

The default locale of Material-UI 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.

<DataGrid
  {...data}
  showToolbar
  localeText={{
    toolbarDensity: 'Size',
    toolbarDensityLabel: 'Size',
    toolbarDensityCompact: 'Small',
    toolbarDensityStandard: 'Medium',
    toolbarDensityComfortable: 'Large',
  }}
/>

🚧 Locale text

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #777 if you want to see it land faster.

The data grid will support dozens of locales with a simple import that includes all the translated messages. You will be able to follow this guide to use them.