Get lightning combobox list appear on top when there is few rows in lightning Datatable

I have just tested it. it works fine for me. I have used the cellAttributes property to assign a css class to each cell of the action column:

Here is the code:

HTML

<template>
    <lightning-datatable key-field="id" data={addresses} columns={columns} hide-checkbox-column="true">
    </lightning-datatable>
</template>

JS

import { LightningElement, track } from 'lwc';
import  { loadStyle } from 'lightning/platformResourceLoader';
import cssResource from '@salesforce/resourceUrl/CssFile';

const actions = [
    { label: 'Edit', name: 'edit' },
    { label: 'Delete', name: 'delete' },
];

export default class HideAction extends LightningElement {

    @track addresses = [
                        {Id:1, name: 'Accedo-10001681', email: 'test@gmail.com', apiName: 'Account', cssClass: 'showActionButton'},
                        {Id:2, name: 'A Call To Action Medi..', email: 'test@gmail.com', apiName: 'Account', cssClass: 'showActionButton'},
                        {Id:3, name: 'Adam Baxter', email: 'adam.baxter@gmail.com', apiName: 'Contact', cssClass: 'hideActionButton'},
                        {Id:4, name: 'Adam Aigner-Treworgy', email: 'adamat@gmail.com', apiName: 'Contact', cssClass: 'hideActionButton'}                 
                      ];

    actions = [
                { label: 'Edit', name: 'edit' },
                { label: 'Delete', name: 'delete' },
              ];

    @track columns = [
        { label: 'Actions', type: 'action', typeAttributes: { rowActions: actions , menuAlignment: 'left'}, cellAttributes: { class: { fieldName: 'cssClass' }}},
        { label: 'Name', fieldName: 'name', type: 'text'},
        { label: 'Api Name', type: 'button', typeAttributes: { label:  {fieldName: 'apiName'}, variant: 'base' } },
        { label: 'Email', fieldName: 'email', type: 'email' },
    ];

    connectedCallback(){
        loadStyle(this, cssResource);
    }


}

and add the string property cssClass in your wrapper class. You can use hideActionButton and showActionButton as values of the cssClass property.

Finally, you have to create a css file as a static resource otherwise it will not work. Put into the css static resource this code bellow to hide the action button:

.hideActionButton{
    opacity: 0; 
}

Here is the output:

Here is a link showing how to override css of standard lwc components

Hope this helps

I finally figured this one out! It had to do with not showing enough code in my initial example as I can guarantee someone would have spotted it. Here is the code I was working from -

     <div class="slds-truncate" title={attrib.value}>
         <template if:true={attrib.allowOverrides}>
             <template if:true={attrib.isPicklist}>
                 <lightning-combobox name={attrib.externalName}
                                     value={attrib.value} 
                                     onchange={handleValueUpdate} 
                                     options={attrib.picklistValues}>
                 </lightning-combobox>
             </template>
         </template>
     </div>

The issue was that I needed to remove the class='slds-truncate'. Once I did that the drop down list was allowed to show over HTML elements below it and everything worked as expected.

Easy fix. Hopefully this will help someone else!