2

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.

Improve this question
2
  • 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? Commented 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 Commented May 9, 2019 at 0:21

1 Answer 1

Reset to default
1

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>
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.