lightning:datatable not rendering correctly

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());

Answer

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.

Attribution
Source : Link , Question Author : Nielsm , Answer Author : Keith C

Leave a Comment