[DataGrid] Support ready-to-use locales

[oliviertassinari]

We have added the support in #196 for providing custom localization strings. It's also known as internationalization or i18n.
However, we can probably push it one step further. For the components in the main repository, we offer the capability to tap into pre-translated locales: https://material-ui.com/guides/localization/#locale-text. We aim to support the top 100 most used locales.

I think that we should offer the same capability here. There are two steps:

1. Do the infrastructure work to make this possible. We can aim to add a few locales to seed the effort: French, Spanish, Bulgarian.
2. Have the community contribute the translations they need.

We might need to replace the current build infrastructure to use the one from the main repository to make it work. I think that we need to support:

import { zhCN } from '@material-ui/data-grid/locale';
import { zhCN } from '@material-ui/x-grid/locale';
import { zhCN } from '@material-ui/x/locale';

or

import zhCN from '@material-ui/data-grid/locale-zhCN';
import zhCN from '@material-ui/x-grid/locale-zhCN';
import zhCN from '@material-ui/x/locale-zhCN';

We need the dev environment, where tree-shaking is disabled, to be fast.

Benchmark

• https://demos.telerik.com/kendo-ui/grid/localization
• https://material-table.com/#/docs/features/localization
• https://www.telerik.com/kendo-react-ui/components/grid/globalization/
• https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/localization/
• https://datatables.net/manual/i18n
• http://tabulator.info/docs/4.5/localize
• https://www.jqwidgets.com/react/react-grid/#https://www.jqwidgets.com/react/react-grid/react-grid-localization.htm
• https://ag-grid.com/javascript-grid-localisation/

[oliviertassinari]

Reopening as we miss #984 to completely solve the issue. A large part of the problem has been solved though.

[oliviertassinari]

Reopening, I think that we should at the very least document the import to use in https://master--material-ui-x.netlify.app/components/data-grid/localization/#locale-text. This information is currently not obvious to find (has to be inferred from the table and the core docs page).

• If we want to push it further, we can have a code snippet with the theme. It would duplicate a bit with the main docs, but maybe it's fine.
• If we want to push it to its extreme, we could have the same demo as https://material-ui.com/guides/localization/#example (import * the locales and render them).

I might also add that developers might/likely don't know how to use data grid and core translations at the same time.

[DanailH]

Ok, I added a code snippet that I got from the https://material-ui.com/guides/localization/#example. I made a PR with the change https://github.com/mui-org/material-ui-x/pull/1024/files

[nappalm]

@oliviertassinari
What happens with the translation of the Grid Toolbar, I have applied according to the example of Localization but it only works in the pagination

[DanailH]

Hey @nappalm, just a quick note - if you think there is a bug please open a new issue with a reproduction example so we can take a look. Also, I'm not sure if you check the localization example in the data grid docs: https://mui.com/x/react-data-grid/localization/ it might help as well to solve your problem.