I have a datatable that can potentially have tons of column, placed inside a limited area.
How can I make it horizontally scrollable?
I've tried wrapping parent container into class="slds-scrollable_x"
to no avail.
Columns have a minColumnWidth
property. You can set the column min to something you choose (perhaps something that lets you read the title properly). If the added widths of the columns exceed the component's screen size, then the horizontal scroll bar will appear.
The documentation states the following:
Resizing Tables and Columns
The width and height of the datatable is determined by the container element. A scroller is appended to the table body if there are more rows to display. For example, you can restrict the height to 300px by applying CSS styling to the container element.
So, if you set a specific width to the container element, then, my understanding is that the scroller should be appended automatically.
For example:
<div style="width: 300px;">
<!-- lightning:datatable goes here -->
</div>
Tested and Works...
<div class="container" style="width:250px">
<lightning:datatable data="{! v.mydata }"
columns="{! v.mycolumns }"
keyField="id"
onrowselection="{! c.getSelectedName }"/>
</div>
minColumnWidth
property. Have you explored with setting that min width and seeing if the datatable figures out scrolling on its own (i.e. if the width of all the columns exceeds the component)?
Commented
May 29, 2018 at 19:33
I've found a good experience embedding my lighting-datatable
inside a lightning-layout-item
with a size
property declared to an appropriate integer value (size corresponds to their Design System grid layout and can be 1 through 12)
<lightning-layout style="height:600px">
<lightning-layout-item size=12>
<lightning-datatable
if:true={data}
key-field={keyInfo.KeyName}
data={data}
columns={columns}
>
</lightning-datatable>
</lightning-layout-item>
</lightning-layout>
I also restrict the height at the outer lighting-layout
level.
All scrollbars seem to appear as they should: when needed, and disappear when not needed. And not at the expense of losing the column headers when scrolling through long resuls