2

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;
    }
}
3

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');
    }
}

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.