Skip to content

Column Pinning in RTL document #5986

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
2 tasks done
sadeghbarati opened this issue Apr 9, 2025 · 1 comment
Open
2 tasks done

Column Pinning in RTL document #5986

sadeghbarati opened this issue Apr 9, 2025 · 1 comment

Comments

@sadeghbarati
Copy link

sadeghbarati commented Apr 9, 2025

TanStack Table version

v8.21.2/v9.0.0-alpha.10

Framework/Library version

React v19.1.0

Describe the bug and the steps to reproduce it

Hi πŸ‘‹

First of all, thanks for the TanStack packages ❀


I have some issues with columns pinning in RTL documents, it seems like the column pinning options are not RTL-friendly

For example, this option

columnPinning: {
  left: ['firstName', 'lastName', 'age', 'visits', 'status'],
},

will stick the columns to the right instead of the left because of RTL direction

It would be nice if we were able to change physical, directional properties/options like left or right options to logical properties/options like start and end

Also, these functions are not RTL-friendly too

  • column.getStart("left/right")
  • column.getAfter("left/right")

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/vitejs-vite-pn9fmj7c?file=src%2Fmain.tsx

Screenshots or Videos (Optional)

No response

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

Maybe, I'll investigate and start debugging

Terms & Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
@sadeghbarati
Copy link
Author

sadeghbarati commented Apr 9, 2025

- left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
- right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+ insetInlineStart: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+ insetInlineEnd: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,

This block of code kinda fixed my problem, but in RTL document left pinned column is included in right columnPinning state

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant