lightning:datatable actions menu is hidden

Question

The actions menu that is supposed to show when you click on the downward arrow on the right-end of a row is not showing.

My component is dead simple: there is a lightning:datatable inside it containing a single row of data. The component is plugged into a Lightning Record Page, inside a tab. Everything renders fine however the actions menu is visually hidden.

Upon a quick inspection of the page my attention was drawn to the following inner-div:

<lightning-datatable>
    <div class="slds-table--header-fixed_container slds-scrollable_x">
        <div tabindex="-1" class="slds-scrollable_y">
            <table>...</table>
        </div>
    </div>

The slds-scrollable_y class has the following 2 properties that are hiding the dropdown list:

overflow: hidden;
overflow-y: auto;

I can overwrite the styling using CSS, however as Alexander Graham Bell must've once said, when one door opens another closes: the datatable is now cut off at the bottom and the action menu still doesn't show.

I can wrap the datatable within a div and make it tall, but needless to say that's a bad solution.

Related question (bot doesn't solve my problem): lightning:buttonMenu dropdown alignment

Answer 1

As it turns out the overflow properties had to be set to visible not just on the slds-scrollable_y class but also on the slds-scrollable_x class.

Problem solved.

Answer 2

I'm working with Lightning Web Components. Turns out I just needed a plain old <div> tag around the table, and that's it.

Theory: Data table needs to live inside of a <div> to figure out its own damn dimensions:

<div>
   <lightning-datatable data={data} columns={RMADetailGridColumns} key-field="Id" 
      hide-checkbox-column sorted-by={SortBy} sorted-direction={SortDirection}
      onsort={HandleSortData} onrowaction={GridActionClick}>
   </lightning-datatable>
</div>

Answer 3

This is the correct answer for the lwc datatable.

In the 'column' attribute configuration, set the menuAignment row action property to 'auto'

See the below images and 'buttonMenu' lwc documentation for explanation.

Hard refresh your page