Lightning Datatable - Hide actions for specific rows

Question

I have an LWC consisting of a datatable. I am using a wrapper class to get Accounts and Contacts and display them using datatable. I have edit and delete action for each row. I want to hide the action button for Contacts (contacts should not be allowed to be edited or deleted). Accounts rows should have the action button.

Is there any way to achieve this? Maybe a rendered attribute? Any help is appreciated.

---

Screenshot of LWC

---

Javascript

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

const columns = [
    {
        type: 'action',
        typeAttributes: { rowActions: actions },
    },
    { label: 'Name', fieldName: 'name', type: 'text' },
    { label: 'Api Name', type: 'button', typeAttributes: { label:  {fieldName: 'apiName'}, variant: 'base' } },
    { label: 'Email', fieldName: 'email', type: 'email' },
];

export default class ContactRelatedAddress extends NavigationMixin(LightningElement) {
    @track columns = columns;
    @track addresses;
    refreshTable;

    @wire(getAddress, { id: '$recordId' }) wired(result) {
        this.refreshTable = result;
        if (result.data) {
            this.addresses = result.data;
        }
        if (result.error) {
            this.error = result.error;
        }
    }
}

---

HTML

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

Answer 1

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

Answer 2

If you want to retain the cell borders as it is in Datatable, Then Try the following CSS.

Instead of this:

 .hideActionButton{
    opacity: 0; 
}

Try This:

.hideActionButton .slds-dropdown-trigger.slds-dropdown-trigger_click {
   display: none;
}

Result: