[data grid] Pinned columns are broken in RTL mode

[TheWeirdDev]

Steps to reproduce

Link to live example: The example in the docs is also broken

Steps:

1. Create a data grid with pinned column(s)
2. Set the theme direction to RTL
3. Observe pinned column(s) do not work

Current behavior

The pinned column does not stick to the side and some columns become invisible.
This video demonstrates the bug:
Screencast from 2024-08-17 13-41-52.webm

Expected behavior

Pinned columns in RTL should work like they do in LTR direction.

Context

No response

Your environment

System:
OS: Linux 6.10 Arch Linux
Binaries:
Node: 22.6.0 - /usr/bin/node
npm: 10.8.2 - /usr/bin/npm
pnpm: 9.7.1 - /usr/bin/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: ^11.13.0 => 11.13.0
@emotion/styled: ^11.13.0 => 11.13.0
@mui/icons-material: ^5.16.7 => 5.16.7
@mui/lab: 5.0.0-alpha.169 => 5.0.0-alpha.169
@mui/material: ^5.16.7 => 5.16.7
@mui/styles: ^5.16.7 => 5.16.7
@mui/x-data-grid-premium: ^7.12.1 => 7.12.1
@mui/x-data-grid-pro: ^7.12.1 => 7.12.1
@mui/x-date-pickers: ^7.12.1 => 7.12.1
@mui/x-date-pickers-pro: ^7.12.1 => 7.12.1
@mui/x-license: ^7.13.0 => 7.13.0
@mui/x-tree-view: ^7.12.1 => 7.12.1
@types/react: ^18.3.3 => 18.3.3
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
styled-components: ^6.1.12 => 6.1.12
typescript: ~5.3.3 => 5.3.3

Search keywords: pinned columns,pinned,rtl

[michelengelen]

Thanks @TheWeirdDev for raising this.
I can confirm this bug and will add it to the board. 👍🏼

[rotembarsela]

I had the same problem today when I tried to implement that on an RTL website

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @TheWeirdDev! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!