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

MUI Translation doesn't work #3514

Closed
2 tasks done
justdvl opened this issue Dec 26, 2021 · 4 comments · Fixed by mui/material-ui#30411
Closed
2 tasks done

MUI Translation doesn't work #3514

justdvl opened this issue Dec 26, 2021 · 4 comments · Fixed by mui/material-ui#30411
Labels
component: data grid This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation

Comments

@justdvl
Copy link

justdvl commented Dec 26, 2021

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

Hello.
Mui Data Grid Pro translations doesn't work. They work on free version up to a point (footer is translated, the header menu not).
Please see codesandbox example: https://codesandbox.io/s/datagridprodemo-material-demo-forked-21t6w?file=/demo.tsx
Also, codesandbox example of MUI translation you link to on your Localization page doesn't even run.

Expected behavior 🤔

I expect full table (including header menu) to be translated when nested in Theme which has localization set. For Pro version of data grid.

Steps to reproduce 🕹

Steps:

  1. Open https://codesandbox.io/s/datagridprodemo-material-demo-forked-21t6w?file=/demo.tsx
  2. Hover over the header cell
  3. Click menu icon to open the menu
  4. Texts are not translated

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`
System:
    OS: macOS 11.6
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.17 - ~/Documents/github/bergversetzer-fe/node_modules/.bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: 95.0.2
    Safari: 14.1.2
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.61 
    @mui/icons-material: ^5.2.5 => 5.2.5 
    @mui/lab: ^5.0.0-alpha.61 => 5.0.0-alpha.61 
    @mui/material: ^5.2.5 => 5.2.5 
    @mui/private-theming:  5.2.3 
    @mui/styled-engine:  5.2.5 
    @mui/styles:  5.1.1 
    @mui/system:  5.2.5 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.3 
    @mui/x-data-grid-pro: ^5.2.1 => 5.2.1 
    @mui/x-license-pro:  5.2.1 
    @types/react: ^17.0.35 => 17.0.35 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: ^4.5.2 => 4.5.2 
@mbrookes mbrookes transferred this issue from mui/material-ui Dec 26, 2021
@alexfauquette
Copy link
Member

The DataGrid has its own locale files. So to get translations, you need to import both the core locale and the DataGrid one.
The documentation specific to localization is https://mui.com/components/data-grid/localization/

Here is a correction of one of the code sandbox (notice that the footer is now in french).
https://codesandbox.io/s/datagridprodemo-material-demo-forked-mbvz6?file=/demo.tsx

@alexfauquette
Copy link
Member

About the codeSandbox that does not works, it is due to the outer them which is provided in the doc but not in the codeSandbox. I'm opening another issue for this special case

@justdvl
Copy link
Author

justdvl commented Dec 27, 2021

Thank you, works well. There is translations missing for pin left, pin right, I assume those can be provided by localeText prop.

@alexfauquette
Copy link
Member

All the missing keys are listed in a special issue. If you can translate some of them, do not hesitate to make a PR :)

#3211

@alexfauquette alexfauquette added component: data grid This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation labels Dec 27, 2021
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! docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants