I am new to lightning design system.

I am using a responsive data table for both directions:

  • lrt
  • rtl

The horizontal table is working perfectly fine in both direction.

But in the vertical table view, rtl direction is not working. The vertical table is automatically comes based on view(responsive table).

I am trying to find documentation for this, but not getting any clue or help from the documentation.

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
             <th scope="col" ng-repeat='val in data' ng-hide='!val.isDisp'>
                <div class="slds-truncate">{{::val}}</div>
            <th width="70px"/>
    <tbody class='slds-block_table-body'>
        <tr name="form">
            <td ng-style="{'padding':'0px'}">
                <span class="icon-save"></span>
            <td ng-repeat='row in details'>

Please suggest how it can achieve for the vertical view.

  • Could you please post your code? – Martin Lezer Aug 10 '17 at 15:31
  • @MartinLezer, I have added code. thanks for your time. – Avnesh Shakya Aug 10 '17 at 16:25

Firstly the Lightning Design System doesn't support RTL out of the box: https://github.com/salesforce-ux/design-system/issues/308

At Vlocity we've added support, but it's not been merged in to SLDS as there have been questions and concerns about different approaches. For example see this PR for 2.2.x https://github.com/salesforce-ux/design-system/pull/438

However you can use our branch which is currently aligned with SLDS 2.2.3 (we're a little behind the latest): https://github.com/vlocityinc/design-system/tree/mgoldspink_Salesforce/master

To make this work, you need to sync up the branch and build the code as per the standard build docs for SLDS. This will generate additional .rtl.css files. In our visualforce pages we detect that language of the User using:

public static Boolean isLanguageRTL() {
    String language = UserInfo.getLanguage();
    if (language == 'iw' ||
        language == 'ar' ||
        language == 'ur') {
            return true;

    return false;

Then in our VF pages we add the following logic to include the right stylesheet:

      <apex:stylesheet value="{!IF(isLanguageRTL, URLFOR($Resource.slds, '/assets/styles/salesforce-lightning-design-system-vf.rtl.min.css'), URLFOR($Resource.slds, '/assets/styles/salesforce-lightning-design-system-vf.min.css'))}"/>

Then the final missing piece is that element needs the slds-max-medium-table--stacked-horizontal class:

<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal">
| improve this answer | |

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.