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 table
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: