call javascript function from icon in LWC lightning-datatable

Question

I want to call a javascript function from the icon in the first column. I had it working with the checkbox that comes out of the box but a checkbox doesn't make sense for an edit function. In my saColumns definition, I added the first column and want it to call the js function below

js:

   const saColumns = [
        {
            type: 'button-icon',
            fixedWidth: 40,
            typeAttributes: {
                iconName: 'utility:edit',
                name: 'edit_record',
                title: 'Edit',
                variant: 'bare',
                alternativeText: 'edit',
                disabled: false
            }
        },
        {label: 'Title', fieldName: 'Title__c', type: 'pickList'},
        {label: 'User', fieldName: 'UserName', Id: 'User__c',type: 'text'}
    ];

handleRowSelection(event) {
    //alert('1');
    const selectedRows = event.detail.selectedRows;
    this.selectedSAIds = [];
    this.showTable = false;

    for (let i = 0; i < selectedRows.length; i++) {
        this.selectedSAIds.push(selectedRows[i].Id);
    }
}

html:

        <template if:true={hasSAs}>
            <lightning-datatable
                    data={datatableSAs}
                    columns={saColumns}
                    key-field="Id"
                    onrowselection={handleRowSelection}
                    hide-checkbox-column="true"
                    selected-rows={selectedSAIds}>
            </lightning-datatable>
        </template>

I have not been able to find a way to call the handleRowSelection. Any direction would be appreciated!

Answer 1

This is basically a row action rather than row selection. So, it should be onrowaction and NOT onrowselection. And below is how you can handle row action:

handleRowAction(event) {
    var action = event.detail.action;
    var row = event.detail.row;
    switch (action.name) {
        case 'edit_record':
            this.editRecord(row.Id); // implement this
            break;
        default:
            this.navigateToFiles(row.Id);
            break;
    }
}

Answer 2

You need to use a row-level action here. Add the name to typeAttriibute of the edit column

{
    type: 'button-icon',
    fixedWidth: 40,
    typeAttributes: {
        iconName: 'utility:edit',
        name: 'edit_record',
        title: 'Edit',
        variant: 'bare',
        alternativeText: 'edit',
        disabled: false,
        name: 'edit' /// this will be useful to identify the 'edit' action.
    }
},

And add row action handler to the datatable.

handleRowAction(event) {
    if (event.detail.action.name === 'edit') {
        let row = event.detail.row;
        // do edit logic here.
    } // you can handle other actions as well here 
}

Add the handleRowAction to data table in HTML like below.

<template if:true={hasSAs}>
    <lightning-datatable
            data={datatableSAs}
            columns={saColumns}
            key-field="Id"
            onrowselection={handleRowSelection}
            hide-checkbox-column="true"
            onrowaction={handleRowAction}
            selected-rows={selectedSAIds}>
    </lightning-datatable>
</template>

Documentation | Similar Playground Example