1

I am using lightning:datatable and it works ok for my english, left-to-right display.

But for my right-to-left display - there are a few problems:

  1. on the table header there is a column added to the right, but it is not added to the tbody itself.

  2. the columns themselves are still aligned left-to-right so the column-resize and the action buttons are still on the right of the column text.

enter image description here

CODE

I use the DIR="RTL" in my markup to set the html to right-to-left:

<div dir="rtl">
    <lightning:datatable aura:id="accountContacts-list"
                         data="{!v.data}"
                         columns="{!v.columns}"
                         keyField="id"
                         maxRowSelection="1"
                         selectedRows="{!v.selectedIds}" />
</div

QUESTION

Is there any solution to make lightning:datatable work in right-to-left?

4
  • 1
    iconPosition and menuAlignment can be modified to left or right as per the doc. We may need custom styling for rest
    – Thamilhan
    Apr 24, 2018 at 10:27
  • the main problem is the added header-column, @Thamilan what do you mean by "We may need custom styling for rest"? what should I do? Apr 24, 2018 at 10:37
  • I meant the CSS. But isn't the menuAlignment working?
    – Thamilhan
    Apr 24, 2018 at 10:38
  • it works but fixes only the action buttons menu - nothing else. do you have a specific css that fixes this ? Apr 24, 2018 at 10:52

1 Answer 1

1

This is a bug so there is no real good solution.

But I have found a workaround that is good enough for my use case.

The problem appears to be because all <th> html elements are defined as text-align: left, and inside the html table in the lightning:datatable component, the table columns are defined as th.

So I did a little css hack - it is not best practice, but as a workaround with 1 line of css code, it is good enough as long as lightning does not support full RTL:

I have added to the surrounding div element a unique css name (myUniqueTable):

<div dir="rtl" class="myUniqueTable">
    <lightning:datatable aura:id="accountContacts-list"
                         data="{!v.data}"
                         columns="{!v.columns}"
                         keyField="id"
                         maxRowSelection="1"
                         selectedRows="{!v.selectedIds}" />
</div>

then in the css file I have added:

.THIS .myUniqueTable th {
    text-align: right !important;
}

So now all th elements under myUniqueTable className would be right aligned. that totally solved my problem

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .