0

We are trying to extend the data table in lwc where in earlier we are using the default row actions but now we want the icons to be included like edit, delete. But I am not sure on how to make them clickable, any suggestions?

Below is the code on how we are displaying the icons

Columns being passed from design attribute:-

[{"label":"Actions","cellAttributes":{"iconName":"utility:edit"}},
{"fieldName": "Comments__c","label":"Comments","type": "Text"}]

Can we make the cell attributes clickable? If so how ?

0

You can add button-icon with the column configuration like this.

{
    type: 'button-icon',
    typeAttributes:
    {
        iconName: 'utility:delete',
        name: 'delete',
        iconClass: 'slds-icon-text-error'
    }
},
{
    type: 'button-icon',
    typeAttributes:
    {
        iconName: 'utility:edit',
        name: 'edit'
    }
}

Also, you can handle the row actions like this.

handleRowAction(event) {
    if (event.detail.action.name === 'delete') {
        this.deleteSelectedRow(event.detail.row);
    } else if (event.detail.action.name === 'edit') {
        this.editMode = true;
        this.openEditForm(event.detail.row);
    }
}

You can check this playground for more details

This will add buttons like below enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.