lightning:datatable not rendering correctly

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.


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.