0

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?

  • 1
    iconPosition and menuAlignment can be modified to left or right as per the doc. We may need custom styling for rest – Thamilan Apr 24 '18 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? – Itai Shmida Apr 24 '18 at 10:37
  • I meant the CSS. But isn't the menuAlignment working? – Thamilan Apr 24 '18 at 10:38
  • it works but fixes only the action buttons menu - nothing else. do you have a specific css that fixes this ? – Itai Shmida Apr 24 '18 at 10:52
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.