[data grid] Pinned columns are broken in RTL mode (re-opening)

[ranpaz]

The issue of pinning columns in RTL mode has still not been resolved (#14586). If you install "@mui/x-data-grid-pro": "^7.20.0" cleanly, without remnants from previous versions, the problem persists. Could you please check and fix this?

Search keywords: pinned columns in RTL mode

[cherniavskii]

Can you provide a reproduction example?
I don't see any issues with column pinning in RTL in our docs: https://mui.com/x/react-data-grid/column-pinning/#initializing-the-pinned-columns

Screen.Recording.2024-10-14.at.13.53.31.mov

[ranpaz]

The bug appears after installing DataGrid without any remnants of previous versions

dir = "rtl

1. npm install @mui/x-data-grid-pro
2. Deleting the node_modules folder
3. npm install

[cherniavskii]

Can't reproduce: https://stackblitz.com/edit/react-fh2m51

[ranpaz]

It seems like we’re working in different environments. I’m using Vite, and I noticed something interesting: when I install DataGrid version 6.19 and then upgrade to 7.20, everything works fine. However, if I delete the node_modules and package-lock.json and reinstall, it stops working. This suggests that there might be a dependency issue or something else specific to the environment that breaks during a clean install.

[ranpaz]

It seems like we’re working in different environments. I’m using Vite, and I noticed something interesting: when I install DataGrid version 6.19 and then upgrade to 7.20, everything works fine. However, if I delete the node_modules and package-lock.json and reinstall, it stops working. This suggests that there might be a dependency issue or something else specific to the environment that breaks during a clean install.

I also want to mention that I ran this test with the code provided by your team. I believe that if this bug is not addressed, users who install only version 7.20 directly may encounter this issue. I kindly request your feedback on this matter.

[MBilalShafi]

@ranpaz Could you provide a live reproduction test case (codesandbox/stackblitz or a git repo) since we have no luck reproducing the issue, even after following the mentioned steps. We could unfortunately not assist much unless the issue has been reproduced.

You could follow this guide to ease the process of reproduction: https://mui.com/x/introduction/support/#bug-reproductions

Thank you!

[ranpaz]

Thank you for your response.

I am unable to reproduce the bug in codeSandbox. I'm not entirely sure which versions the system there is using, but when I run the code you provided as an example "https://stackblitz.com/edit/react-fh2m51" on my local machine and follow these steps:

1. Run npm install @mui/x-data-grid-pro@7.20
2. Delete the node_modules folder
3. Delete the package-lock.json file — this is important. Did you delete this file as well?
4. Run npm install again
   After following all these steps, in RTL mode, I encountered issues with column pinning and resizing.

This suggests that anyone installing only version 7.20 without previous versions may experience these problems.
This is particularly important for me because my system is deployed on AWS, and with each deployment, the files are rebuilt based on the package.json file, without any remnants from previous versions.

Thank :)

[ranpaz]

this is my package.json:

"@emotion/cache": "^11.13.1",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^5.16.6",
"@mui/lab": "^5.0.0-alpha.173",
"@mui/material": "^5.16.6",
"@mui/x-data-grid-pro": "^7.20.0",
"@mui/x-date-pickers": "^7.20.0",
"@mui/x-license": "^7.20.0",

[MBilalShafi]

I'm still not able to reproduce it. Could you also attach your environment info in the issue description?
You could get it by running npx @mui/envinfo

[ranpaz]

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.15.1 - C:\Program Files\nodejs\node.EXE
npm: 10.9.0 - C:\dev\ngfront\node_modules.bin\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (130.0.2849.46)
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.16.7
@mui/icons-material: ^5.16.6 => 5.16.7
@mui/lab: ^5.0.0-alpha.173 => 5.0.0-alpha.173
@mui/material: ^5.16.6 => 5.16.7
@mui/private-theming: 6.1.4
@mui/styled-engine: 6.1.4
@mui/system: 6.1.4
@mui/types: 7.2.18
@mui/utils: 5.16.6
@mui/x-data-grid: 7.21.0
@mui/x-data-grid-pro: ^7.20.0 => 7.21.0
@mui/x-date-pickers: ^7.20.0 => 7.21.0
@mui/x-internals: 7.21.0
@mui/x-license: ^7.20.0 => 7.21.0
@types/react: ^18.3.11 => 18.3.11
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
styled-components: ^6.1.12 => 6.1.13
typescript: 5.6.3

[ranpaz]

I updated to @mui version 6.1.3, and the issues were resolved. Please consider adding to the documentation that upgrading to DataGrid 7 requires updating the installed version of MUI.

Anyway, thanks for the help! :)"

[MBilalShafi]

Do you mean the version of @mui/material?
We don't have any such requirement for this change, the minimum supported version for the Data Grid v7 version to work is 5.15.14 as mentioned here: https://mui.com/x/migration/migration-data-grid-v6/#update-mui-material-package

Just to confirm, were you able to reproduce the issue on 5.15.14 or higher?
If yes, could you try matching versions of all the packages coming from MUI Core and see if you can still reproduce the error? There could be some conflicts across different major versions.
Here are the packages: @mui/material, @mui/styled-engine, @mui/system, @mui/types, @mui/utils.

Sidenote: @mui/private-theming is an internal package and not supposed to be used in the userland. Could you mention what use-case you have for it?

[ranpaz]

Yes, I am referring to @mui/material.
Regarding @mui/private-theming, I have not installed or used it in my project.

As for reproducing the bug, prior to the MUI update, my versions were (as seen in the message above):
@mui/icons-material: ^5.16.6
@mui/lab: ^5.0.0-alpha.173
@mui/material: ^5.16.6

These versions are all higher than the minimum requirement of 5.15.14.

[ranpaz]

I did not install the following libraries in my project:
@mui/styled-engine, @mui/system, @mui/types, @mui/utils

[MBilalShafi]

I suspect it's something to do with your local environment, could you try reproducing the issue on another machine/environment if available?

Ideally, all the Data Grid features, including the bug fix done in #14586 should work with the minimal supported @mui/material version. If you could, please provide a minimal reproduction, if it's something on our side, we could surely treat it as a bug and fix it.

[ranpaz]

The bug was also observed when I deployed to cloud servers on AWS, as I mentioned earlier. In the AWS deploy, the code is always built from scratch, so this is not related to the settings on my machine.

Additionally, as I mentioned, when I installed DataGrid version 6 and then DataGrid version 7, the system worked correctly. When I wanted to simulate the working state in AWS, I deleted the node_modules folder + package-lock.json to ensure there were no remnants from version 6, and then, as stated, the issue appeared.

Have you tried installing on a local machine with the versions I sent you (the result of npx @mui/envinfo)?

By the way, I’m fine with closing my request – updating the MUI version resolved the issue for me as well as in AWS.

[MBilalShafi]

Thank you for providing the details around installed packages and reproduce steps.
I was finally able to reproduce #14245 on a fresh next.js app. Wierd that it didn't reproduce in an existing app.

Here's the project it reproduced on after following the mentioned steps on the latest version (v7.21): https://github.com/MBilalShafi/test-mui-x-14953/

I'll keep this open as a bug to figure out the root cause.

It seems to have a connection with the other dependencies, since I couldn't reproduce it on same @mui/material and @mui/x-data-grid versions in the X docs project.

CC @KenanYusuf Feel free to share if you could guess a possible cause, since you fixed the original bug.

[cherniavskii]

@MBilalShafi I tried reproducing it Stackblitz with the latest version of libraries: https://stackblitz.com/edit/react-jbitvf-gwmsiv?file=index.js,Demo.js
Is it the same issue you reproduced in your repo?

[MBilalShafi]

@cherniavskii I think it's a bit different since this one gets fixed by adding dir="rtl" on the wrapper div: https://stackblitz.com/edit/react-jbitvf-n8uzpa?file=index.js,Demo.js, the one in repo has the exact same code as our demo example, yet it fails.

I suspect it has something to do with recent useRtl implementation on the core side for some versions of @mui/material, not sure though.