Sticky Pinned Columns Misplacement in Material React Table for RTL Language

[amirhosseinkh2515]

material-react-table version

v2.11.2

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

When using the Material React Table package in a React project supporting both RTL and LTR languages, an issue arises with sticky pinned columns in RTL mode. The problem occurs specifically with the misplacement of the pinned columns, impacting the left and right positioning when scrolling horizontally.

Steps to Reproduce:

Set the project language to RTL.
Utilize the Material React Table package.
Pin some columns in the table.
Scroll horizontally to observe the behavior of the pinned columns.

Expected Behavior:
Sticky pinned columns should maintain proper left and right positioning when the language is set to RTL, ensuring a consistent and expected layout while scrolling horizontally.

Actual Behavior:
Sticky pinned columns exhibit misplacement issues in terms of left and right positioning when the language is switched to RTL.

Minimal, Reproducible Example - (Optional, but Recommended)

link to sandbox

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Yes, I think I know how to fix it and will discuss it in the comments of this issue

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.