Column Pinning Not Working in Mantine When RTL Mode Is Enabled

[lberezinski]

mantine-react-table version

2.0.0-beta.8

react & react-dom versions

18.3.1

Describe the bug and the steps to reproduce it

When using Mantine's RTL (right-to-left) mode, the column pinning functionality is not working as expected. Columns fail to remain pinned, causing issues with the layout and user experience in RTL environments.

Steps to Reproduce:

1. Enable RTL mode in a Mantine project (refer to the Mantine RTL documentation).
2. Implement a table with column pinning functionality.
3. Attempt to pin a column (e.g., left or right).

Expected Behavior:
Columns should remain pinned as configured, maintaining their fixed position within the table.

Actual Behavior:
Column pinning does not work in RTL mode. Pinned columns either move unexpectedly or fail to stay in the correct pinned position.

Environment:

• Mantine Version: [Specify version, e.g., 7.x.x]
• Browser: [Specify browser and version, e.g., Chrome 120.0.0]
• OS: [Specify operating system, e.g., Windows 11]

Additional Context:
This issue seems specific to RTL mode. The same functionality works correctly in LTR mode.
Link to Mantine RTL docs: https://v7.mantine.dev/styles/rtl

Possible Related Areas:
This issue may involve how Mantine handles CSS or DOM manipulations in RTL mode.

Minimal, Reproducible Example - (Optional, but Recommended)

example.zip

Screenshots or Videos (Optional)

With RTL enabled:

Without RTL:

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

None

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.