[DataGrid] Implement i18n

[oliviertassinari]

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]

I recall a discussion around a year ago about what would be the best approach to handle localization with large components, e.g mui/material-ui-pickers#1429 (comment). While we use xxxText props when a component needs a few translation keys, I propose we have a single prop, called text as done in mui/material-ui#18872 for the data grid.

[oliviertassinari]

My first comment is about exposing an API to allow customizing the wordings in the data grid. There is a second important dimension to consider: providing out of the box support for popular locales.

We could use the exact same mechanism as the other components. The content could be stored in the main repository. We aim to support the 100 most used locales. The main downside would be about the bloat introduced, but I would argue it's negligible.
At least, there is a tradeoff to consider between the usage simplicity of having all the translations inside a single object and the complexity to cherry-pick the translations for the component used to save a bit of bundle size.

If we decided to host the translations in the repository, we will need to work on the bundling script as it's not set up to support it.

[oliviertassinari]

A proposed plan of action, we do it in two steps. The first step closes this issue, a new issue will need to be open for 2. (so we can have a number of 👍 that isn't skewed by an issue linked in the documentation).

1. i18n

1. We add a localeText prop to the DataGrid and XGrid components. This is an object that can be globally overridden through the theme with theme.components.MuiDataGrid.defaultProps.localeText.
2. The prop performs a deep merge with the default translations.
3. The default translations are in the en_US locale.
4. We use the context to propagate the prop down to all the components of the grid. This propagation can be implemented with a custom context or the apiRef, to be determined on what we need to optimize. No matter the solution we pick, it needs to propagate everywhere in the data grid. I memo shouldn't prevent the value to be updated.
5. We document it.

2. l10n

1. We implement https://next.material-ui.com/guides/localization/.
2. There is a challenge around where the translated values are hosted, tree-shaked, and used by developers. Maybe like this would be good enough:

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { zhCN } from '@material-ui/date-grid/locale'; // for DataGrid
import { zhCN } from '@material-ui/x-grid/locale'; // for XGrid
import { zhCN } from '@material-ui/x/locale'; // for all the X components

const theme = createMuiTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  zhCN,
);

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;

[oliviertassinari]

I have created a separate issue for the point 2. l10n: #777 so this one can focus on 1. i18n.