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

Tested and Works...

enter image description here

  <div class="container" style="width:250px">
        <lightning:datatable data="{! v.mydata }" 
            columns="{! v.mycolumns }" 
            onrowselection="{! c.getSelectedName }"/>
  • That seems to work only with the height
    – dzh
    May 29 '18 at 17:54
  • works for the width as well
    – glls
    May 29 '18 at 18:02
  • 1
    Columns have a 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)? May 29 '18 at 19:33
  • 1
    @SebastianKessel yeah that solved it. Worth noting that it's a plain integer, rather than px.
    – dzh
    May 29 '18 at 20:23
  • 1
    I'll post as an answer, so others can benefit. May 29 '18 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.