2

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 ?

1 Answer 1

2

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

3
  • Hi Rahul! I was trying to implement something similar and cannot achieve it. Cannot access the playground link you mentioned. Can you please share the complete code snippet? Thank you. Jun 3, 2021 at 12:26
  • 1
    @Nishant Singh Panwar here is the sample code Jun 3, 2021 at 13:14
  • This should be marked as best answer. 👍 Jun 4, 2021 at 14:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .