RTL column resizing doesn't work

[giladv]

Describe the bug

while on RTL mode, column resizing is working backwards.

Your minimal, reproducible example

https://codesandbox.io/s/mystifying-glade-ng5e9f

Steps to reproduce

try to resize a column

Expected behavior

should resize columns as expected but from right to left

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

all

react-table version

latest

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] 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.

[ierfaaan]

I'm getting the same issue :(( Please investigate this issue @KevinVandy @tannerlinsley

[mohsenomidi]

Dear @tannerlinsley Thanks for your great data table library Same issue here also in version 8, the RTL support is very important for many languages, is there any plan to fix resizing direction

[samuelarbibe]

Hey guys!

You can check out my fork:
https://github.com/samuelarbibe/table
That fixes column resizing according to an added rtl option.

To make column resizing work in an rtl context, you need to change 2 things:

1. add rtl: true option to you useTable declaration

  const table = useReactTable({
    data,
    columns,
+   rtl: true,
    columnResizeMode,
    getCoreRowModel: getCoreRowModel(),
    debugTable: true,
    debugHeaders: true,
    debugColumns: true
  });

2. change the css for you resizer

.resizer {
  position: absolute;
  top: 0;
+ left: 0;
- right: 0;
  height: 100%;
  width: 5px;
  background: rgba(0, 0, 0, 0.5);
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

This is a very basic WIP, just to get things to work.
I can't promise I will form it into a complete PR, as this was done for personal purposes.

you can install the following npm package:

npm i @samuelarbibe/react-table-rtl

https://www.npmjs.com/package/@samuelarbibe/react-table-rtl

[AlonMiz]

hey, is there any progress on that? 🙏

[samuelarbibe]

Hey! I have resolved to making my own forked library and using it, because I didn’t find a nice enough solution worthy of a PR.

[samuelarbibe]

Hey! just submitted a PR to add support for RTL column resizing. check it out: #5192

[KevinVandy]

^twas shipped