search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.51k stars 1.31k forks source link

[DataGridPremium] Columns revert to initial state when language is changed #5644

Open toinhao1 opened 2 years ago

toinhao1 commented 2 years ago

Order ID 💳

46557

Duplicates

Latest version

The problem in depth 🔍

I was asked by @m4theushw to create a new issue for this problem. related to #4950

I am building a multi language platform and need to be able to switch the language of not only the DataGrid provided components, but also the columnHeaders that I provide.

For the DataGrid toolbar this works perfectly, but if I have to pass in my own translations for the columnHeaders I get the issue below.

The issue is that if I have to re render every-time the language selection is changed then the table is brought to the initial state of the columns.

For example the default language is english so all of the column headers are in english, then the user moves columns re orders them, pinned a few columns, grouped rows. Then changes the language to french, since I memoize the columns with the selected language as the dependency this will re render the columns in the initial state, but with french language.

Your environment 🌎

`npx @mui/envinfo` ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```
alexfauquette commented 2 years ago

How do you pass the translation to the column headers?

I assume you update the columns prop to set a new headerName property to columns.

If yes, maybe a solution could be to wrap the DataGrid in a context provider responsible to do the translation by providing a translation for each field. And use the renderHeader to return a component that would consume the translations. Such an architecture would allow to update the column headers without modifying the columns prop