Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] translation/localization keys not taking effect #3958

Closed
2 tasks done
ole-magnus opened this issue Feb 15, 2022 · 2 comments
Closed
2 tasks done

[DataGrid] translation/localization keys not taking effect #3958

ole-magnus opened this issue Feb 15, 2022 · 2 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! l10n localization

Comments

@ole-magnus
Copy link

ole-magnus commented Feb 15, 2022

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

According to docs (https://mui.com/components/data-grid/localization/#locale-text):
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

However, in my project, setting up a datagrid like this:

import { DataGrid, skSKGrid } from '@material-ui/data-grid';

<DataGrid rows={rows} columns={columns} localeText={skSKGrid} />;

only takes effect for certain parts of the UI. I.e. the column options are properly localized:

Skjermbilde 2022-02-15 kl  14 12 24

wheras the footer in the table is not:
Skjermbilde 2022-02-15 kl  14 13 26

My code example is using v4 but just tested on v5.4.1 and the latest published on npm and same result experienced there. Either this seems like a bug or documentation is off.

Expected behavior 🤔

All keys passed to localeText take effect. Now only a subset does

Steps to reproduce 🕹

See "Current behavior"

Context 🔦

See "Current behavior"

Your environment 🌎

`npx @mui/envinfo`
 Tested on both v4 and v5.4.1 and latest.

Order ID 💳 (optional)

No response

@ole-magnus ole-magnus added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 15, 2022
@flaviendelangle
Copy link
Member

flaviendelangle commented Feb 15, 2022

Several things here:

The doc example is as follow:

import { DataGrid, skSK } from '@material-ui/data-grid';

<DataGrid rows={rows} columns={columns} localeText={skSK.components.MuiDataGrid.defaultProps.localeText} />;

skSKGrid should not be exported and has been removed in a release (you are probably using a v4 version before it)
skSK also includes the core translations (for instance the pagination "Row per page" is a core translation), that's probably why it was not translated in your exemple.

A working example with v5: https://codesandbox.io/s/datagrid-v5-quick-start-forked-vnevs

For V4, the logic is the same but the path differ skSK.props.MuiDataGrid.localeText


After that, if you have untranslated keys, it's because nobody translated them.
You can open a pull request to add correct translations and we will review it and add it to the next v5 release 👍
See #3211 for more context

@flaviendelangle flaviendelangle added component: data grid This is the name of the generic UI component, not the React module! l10n localization and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 15, 2022
@ole-magnus
Copy link
Author

@flaviendelangle That explains it for me. Thanks a lot! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! l10n localization
Projects
None yet
Development

No branches or pull requests

2 participants