React-table: RTL Support

[jslvtr]

What version of React-Table are you using?

6.6.0

What bug are you experiencing, or what feature are you proposing?

It doesn't look like react-table has RTL support. It would include:

• Reversing direction of content in cells;
• Reversing order of columns in table;
• Reversing prev/next pagination buttons;
• Probably more things I'm not thinking about.

Is this something we're thinking about doing? It's a hard constraint on my use case.

[gary-menzel]

Firstly, the design goal of react-table is lightweight so it is not going to have every feature in it. But it is very rich in allowing you to customise it.

Of the list you have provided:

• RTL text direction is a CSS thing - so you should be able to override cell props for this
• You can order the columns any way you like in your columns array
• prev/next - nothing in the box but you could create your own PaginationComponent
• "more things" - would need to know what they are but many would be possible through all the component and prop hooks the solution exposes.

These are all customisations that can be done - and you could build a HoC to do these so you can reuse it by wrapping any ReactTable with the HoC.

[gary-menzel]

Suggest adding the ability to "switch" the prev/next buttons to provide assistance for RTL use.

[webernir]

I also face issues with RTL support (when having direction: rtl).

one issue is that horizontal scroll is not working as expected.
I was able to fix that by using:

<ReactTable
   getTableProps={() => ({ style: { display: 'block' } })} // direction: rtl fix
/>

see demo

[atlanteh]

@webernir Thank u! This happened to me too, and u just saved me!
@gary-menzel is there any way to fix this to have it working both for ltr & rtl?

[gary-menzel]

@atlanteh I am not quite sure what you mean. At present, there is no official support for RTL other than what you can do by overriding the CSS. So far, the answers contributed in this issue are as much as we know.

For the switching of the buttons, you still need to code your own Pagination component.

I'm not even sure what the more recent suggestion (for scrolling) would do across all the different browsers.

[atlanteh]

Well, I'm not saying full support for RTL, but if the suggested css is good for both ltr & rtl, then maybe you can use that instead of the current implementation.

My problem was a little bit different than what was shown in the demo. My problem was that even though there was enough space, my table always had horizontal overflow. Once applying the fix, the scrolling disappeared.

[gary-menzel]

That's where the issue is - the current CSS is fairly finely tuned and relies heavily on flex. So changing the display from flex to block may have unintended consequences. To make such a top-level change would require extensive testing across a range of browsers to ensure it is backwards compatible or a completely new major version.

Given that this can be easily overridden in the current implementation, it is unlikely to make it into an actual change in the code. Hence why the priority is low.

However it is marked as a feature request that would be considered in any future major updates of the component. Some of the basic principles for a brand new major version are being considered at the moment.

[TheYarin]

I also suffer from this scrollbar bug using the latest version of react-table, I hope this will be fixed soon!

[gary-menzel]

There are no intentions to "fix" this in the current version. If your requirement depends on RTL support then you should probably consider a different table package.

Even in the next major re-write there may be no support for RTL (the thinking is currently that all of the styling and extraneous functionality - like pagination controls - will be stripped out into separate modules and will need to be plugged in or created by the developer).

It remains as a LOW priority.

[tannerlinsley]

Closing for now. There is no plan to include any more RTL support than is already possible within the scope of React-Table.

[AFanaei]

Hi
Now that version 7 is in alpha stage could you add @webernir css to master.

Also it is possible to update documentation and add a section about rtl support if you want i can create a PR to update documentation with some examples.

[dadwic]

https://github.com/tannerlinsley/react-table/pull/2733