[DataGrid] Support RTL

[oliviertassinari]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

right-to-left is not supported

Expected Behavior 🤔

right-to-left is supported

Steps to Reproduce 🕹

Steps:

1. https://material-ui-x.netlify.app/components/data-grid/pagination/
2. Click on the right-to-left icon
3. 💥

Context 🔦

I think that we should wait for upvotes before taking on this task. It's not a frequent requirement.

• [ ] #3435
• [ ] #4954
• [ ] #4990
• [ ] #5063

Your Environment 🌎

Tech	Version
Material-UI X	v0.1.63

[oliviertassinari]

Based on https://npm-stat.com/charts.html?package=jss&package=jss-RTL&from=2021-09-17&to=2022-09-17 RTL is 2% of the global market share.

So it should probably be a low priority for the maintainers of this project.

Now, I think that it's typically why we are open source: if the community could work on a fix, it would be great. From my experience adding RTL support, it has never been really hard nor added a lot of bundlesize overhead, it's more that it has an opportunity cost.

[alii-7]

@oliviertassinari This issue exists in version 5. Can it be be reopened to be fixed in v5?

[oliviertassinari]

@alii-7 the issue is open, per its status on GitHub.

[mbrookes]

Per the email from Amir Mohammad Tavakoli, the documentation appears to claim RTL support: https://material-ui.com/components/data-grid/localization/

[oliviertassinari]

appears to claim RTL support

@mbrookes True, it's referenced once in the header description. We can fix this, by being more explicit.

[billyTepper]

Any new about fixing the problem ? or any workaround ? right now there are no chance of working with DataGrid in RTL

[LironShirazi]

After many hours of trying a lot of things to fix it, I found a workaround for making the headers work correct with the data table of DataGrid, I just modified the direction of 2 classes to be ltr (assuming that the whole project is wrapped with RTL, in my case with 'stylis' and RTL plugin, using MUI V5). I modified these classes via makeStyles function:

root: {
  '& .MuiDataGrid-columnsContainer': {
   direction: 'ltr'
  }
  '& .MuiDataGrid-virtualScroller': {
    direction: 'ltr',
  }
}

I hope it helps someone :)

[dashty94]

@LironShirazi This solution https://github.com/mui/mui-x/issues/230#issuecomment-1184312734 is not working for me. Would you be too kind and share a working code example?

[alirezagh73]

Will it be fixed this bug in the next versions?

[ghasemi1994]

Hi dear. I have same problem, what I'm gonna do? and fixe it

[ghasemi1994]

@oliviertassinari How to fix problem

[yaredtsy]

I have a simple workaround, you can check it out if it helps https://codesandbox.io/s/nice-frost-5vuf86?file=/demo.js.

[yaredtsy]

Hi @oliviertassinari I have fixed this issue and submitted a PR https://github.com/mui/mui-x/pull/6580

[samislam]

Any update on this?