[SalesForce] Distinguish between two row actions of datatable for LWC

I have two buttons on each row of my datatable. Note that I am using LWC. Problem is, both the buttons use the same onrowaction method in Javascript. Hence both buttons run the same code and work the same. How will I be able to know whether the onrowaction was triggered by 1st button or the 2nd button? Maybe something in the form of if - else to distinguish using the button label or the column number? Please guide. Thanks.

One button edits the record and one button navigates to account.

Screenshot of LWC

I checked data of both buttons using window.console.log(JSON.stringify(event.detail.row));.
The data is the same. I did not find any way to find out which button was clicked.
I also thought of using this.template.querySelector('lightning-datatable'). This too didn't help.

HTML

<lightning-datatable key-field="id" data={accountsData} columns={columns} onrowaction={handleRowActions}></lightning-datatable>

JavaScript

const columns = [
    {
        // label: 'Action',
        type: 'button',
        initialWidth: 50,
        typeAttributes: {
            // label: {fieldName: 'nameMdmId'},
            label: 'Edit',
            variant: 'base',
        }
    },
    { label: 'Contact Role',initialWidth: 200, fieldName: 'Contact_Role', type: 'text'},
    {
        label: 'Account',
        type: 'button',
        initialWidth: 200,
        typeAttributes: {
            label: {fieldName: 'Account_Name'},
            variant: 'base',
        }
    },
    { label: 'Segmentation', fieldName: 'Segmentation', type: 'text' },
    { label: 'MDM ID', fieldName: 'Account_MDM_Id', type: 'text' },
    { label: 'Account Category', fieldName: 'Account_Category', type: 'text' },
    { label: 'Account Subcategory', fieldName: 'Account_Subcategory', type: 'text' },
    { label: 'Salesrep', fieldName: 'Sales_Rep', type: 'text' },
    { label: 'IsPrimary', fieldName: 'Is_Primary', type: 'boolean'},
];

export default class ContactRelatedAccount extends NavigationMixin(LightningElement) {

    @wire(getAccount, { ContactID: '$recordId' }) wired(result) {
        this.refreshTable = result;
        if (result.data) {
            let preparedAccounts = [];
            result.data.forEach(account => {
                let preparedAccount = {};
                preparedAccount.Contact_Role = account.ContactRole;
                preparedAccount.Account_Name = account.AccountId.Name;
                preparedAccount.Segmentation = account.AccountId.Segmentation__c;
                preparedAccount.Account_MDM_Id = account.AccountId.Master_Customer_ID__c;
                preparedAccount.Account_Category = account.AccountId.Customer_Category__c;
                preparedAccount.Account_Subcategory = account.AccountId.Customer_Subcategory__c;
                preparedAccount.Sales_Rep = account.salesRep;
                preparedAccount.Is_Primary = account.IsPrimary;
                preparedAccount.CRId = account.CRId;
                preparedAccounts.push(preparedAccount);
            });
            this.accountsData = preparedAccounts;
        }
        if (result.error) {
            this.error = result.error;
        }
    }

    handleRowActions(event) {
        this.row = event.detail.row;
        window.console.log(JSON.stringify(event.detail.row));
        this.showEditModal = true;
        this.bShowModal = true;
        this.currentRecordId = this.row.CRId;
    }
}

Best Answer

We would normally have property name in type attributes based on which you can differentiate. However you can also use label (if they are different - usually they are same) or any other attribute in event.detail.action.

Below is example: (Playground Link):

columns = [
    { type: 'button', typeAttributes: { label: 'First Button', name: 'first_button', variant: 'base' } },
    { label: 'Name', fieldName: 'name' },
    { type: 'button', typeAttributes: { label: 'Second Button', name: 'second_button', variant: 'base' } },
    { label: 'Phone', fieldName: 'phone', type: 'phone' },
];

handleRowAction(event) {
    console.log(JSON.stringify(event.detail.action));
    if(event.detail.action.name==='first_button') {
        console.log('clicked FIRST button');
    } else if (event.detail.action.name==='second_button') {
        console.log('clicked SECOND button');
    }
}
Related Topic