11

I'm having troubles with rendering my datatable correctly. There are actions added but it seems the datatable is not high enough to view it correctly. Is it something I'm doing wrong? Or is it a bug?

Datatable printscreen

This is the code for the datatable

<div class="slds-text-heading_medium">Search results</div>
<lightning:datatable data="{! v.persondata }" 
                    columns="{! v.personcolumns }" 
                    keyField="id"
                    onrowselection="{! c.getSelectedPerson }"
                    hideCheckboxColumn="true"
 />

Here is the code for initializing the columns

//init datatable
component.set('v.personcolumns', [
            {label: 'Last Name', fieldName: 'LastName', type: 'text'},
            {label: 'First Name', fieldName: 'FirstName', type: 'text'},
            {label: 'Mailing Zip/ Postal Code', fieldName: 'PersonMailingPostalCode', type: 'text'},
            {label: 'Mailing City', fieldName: 'PersonMailingCity', type: 'text'},
            {label: 'Billing Street', fieldName: 'PersonMailingStreet', type: 'text'},
            {label: 'Email', fieldName: 'PersonEmail', type: 'text'},
            {label: 'Primary Phone', fieldName: 'PersonHomePhone', type: 'text'},
            {label: 'Secondary Phone', fieldName: 'PersonOtherPhone', type: 'text'},
            {type: 'action', typeAttributes: { rowActions: actions}}
        ]);

And the code for adding data (the response is a list of Accounts)

component.set('v.persondata',response.getReturnValue());
11

A work around until the component handles this better itself is to use CSS of this nature in your component:

.THIS .slds-scrollable_y {min-height: 150px}

that sets the minimum height of the vertical scrolling region that lightning:datatable outputs:

<div tabindex="-1" class="slds-scrollable_y" style="width: 902px;">
    <table role="grid" class="slds-table ...

Some background info...

Maybe more of a clarification than an answer, but I tried a lightning:datatable where I could vary the number of rows. With quite a few rows, there is room for the menu to pop up below the selected row button and not be clipped, and when towards the bottom of the table the menu pops up above the selected row button elegantly handling the clipping problem there:

example lightning:datatable image

But yes for the small number of rows case, I see the same as you. Users can scroll to see the menu but that's not great. An automatic minimum height of one row plus the height of the menu would be nice to have to address that.

6

Setting slds-scrollably_y to a minimum height is one solution, but might look a bit odd with just a few rows.

A better solution would be to use overflow: visible;, like so:

.THIS .slds-scrollable_x { overflow: visible; }
.THIS .slds-scrollable_y { overflow: visible; }

This will allow the action menus to go over other elements, regardless of the height of the table.

  • 1
    Yep this works better! – Keith C Oct 9 '18 at 16:20
1

There is a better and documented way now!

As per documentation:

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.

<div style="height: 300px;">
    <!-- lightning:datatable goes here -->
</div>

You can even configure it using an attribute like this:

<aura:attribute name="heightInPixels" type="Integer" access="global" default="150" />

<div aura:id="dataTable" style="{! 'height: ' + v.heightInPixels + 'px;'}">
    <!-- lightning:datatable goes here -->
</div>

NOTE: VSCode might show a syntax error for the above code, you can just ignore it.

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.