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