[SalesForce] How to put slds-scrollable horizontal scroll at bottom of table (instead of bottom of page)

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>
    <div class="slds-scrollable" style="height: 100%; width: 150rem;">
        <lightning:datatable
                             columns="{! v.columns }"
                             data="{! v.ExpenseList }"
                             keyField="Amount"
                             maxRowSelection="{! v.maxRowSelection }"
                             onrowselection="{! c.updateSelectedText }"/>
    </div>
</div>

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.

Best Answer

here was the final component I ended up with:

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