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>
Best Answer
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
JS
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:
Here is the output:
Here is a link showing how to override css of standard lwc components
Hope this helps