2

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.

3 Answers 3

3

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.

3

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

enter image description here

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

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .