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, 2019 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, 2019 at 0:21

1 Answer 1


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 }"

You must log in to answer this question.

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