[data grid] Support RTL

[oliviertassinari]

• The issue is present in the latest release.
• 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.

• DataGrid header cells not scrolling in RTL containers #3435
• DataGrid - Resizing Columns when RTL mode #4954
• [DataGrid] Keyboard navigation in RTL mode #4990
• [DataGridPro] Column Pinning in RTL mode #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.

[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 #230 (comment)
is not working for me. Would you be too kind and share a working code example?

[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 #6580

[samislam]

Any update on this?