[SalesForce] Actions on lightning datatable go out of screen for LWC

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

We would normally have property name in type attributes based on which you can differentiate. However you can also use label (if they are different - usually they are same) or any other attribute in event.detail.action.

Below is example: (Playground Link):

columns = [
    { type: 'button', typeAttributes: { label: 'First Button', name: 'first_button', variant: 'base' } },
    { label: 'Name', fieldName: 'name' },
    { type: 'button', typeAttributes: { label: 'Second Button', name: 'second_button', variant: 'base' } },
    { label: 'Phone', fieldName: 'phone', type: 'phone' },
];

handleRowAction(event) {
    console.log(JSON.stringify(event.detail.action));
    if(event.detail.action.name==='first_button') {
        console.log('clicked FIRST button');
    } else if (event.detail.action.name==='second_button') {
        console.log('clicked SECOND button');
    }
}