I have a lightning:datatable component which has quite a lot of columns, where we want the user to scroll horizontally.

The horizontal scrollbar is fixed to the bottom of the page. I would like to appear at the bottom of the tableenter image description here

In the screenshot above, I want the scrollbar to appear beneath the last row of the datatable. The code for the component is below:

    <div class="slds-scrollable" style="height: 100%; width: 150rem;">
                             columns="{! v.columns }"
                             data="{! v.ExpenseList }"
                             maxRowSelection="{! v.maxRowSelection }"
                             onrowselection="{! c.updateSelectedText }"/>

I've tried every combination I can think of using slds-scrollable_x and slds-scrollable_y but can't seem to get the scrollbar to sit within the component (rather than the page).

I'd appreciate any help or ideas.

  • Is it perhaps the case that the scrolling is on the <div> but your height: 100% is making the div fill the vertical viewport, and so the scroll bar appears at the bottom of the screen? May 8 '19 at 15:46
  • Thanks Thomas. I did finally get this working and should have updated the answer - in the end I had to remove the height attribute and remove the slds-scrollable attribute. I'll post the answer below
    – Greg J
    May 9 '19 at 0:21

here was the final component I ended up with:

        <div class>
            <div style="width: 2500px">
                <lightning:datatable columns="{! v.columns }"
                                     data="{! v.ExpenseList }"
                                     onrowselection="{! c.rowSelected }"
                                     onrowaction="{! c.handleRowAction }"

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.