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 ?

Improve this question

1 Answer 1

Reset to default
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

Improve this answer
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.
    – Nishant Singh Panwar
    Jun 3, 2021 at 12:26
  • 1
    @Nishant Singh Panwar here is the sample code
    – Rahul Gawale
    Jun 3, 2021 at 13:14
  • This should be marked as best answer. 👍
    – Nishant Singh Panwar
    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 .