Row-Level Actions in LWC Datatable in Salesforce

In Salesforce Lightning data tables, we can add row-level actions to perform actions specific to a single row in the data table, such as edit, view, or delete the record directly from the data table using the concept of navigation.

In this Salesforce tutorial, we will learn how to add row-level actions in LWC datatable in Salesforce.

What are Row-level actions in Salesforce Lightning data table?

In Salesforce LWC data tables, row-level actions allow us to perform specific actions on rows, such as edit, view, or delete, by providing action buttons or a dropdown menu within each row.

When we perform any row action, such as deleting the row, it will ultimately delete the object record. The edit action will open the record in edit mode, and the view action will open the record in view mode.

For the view and edit action the record should open in the edit window or view mode, so for that, we will use the ‘NavigationMixin.Navigate’ method to navigate on the record page.

Add Row-Level Actions in LWC Datatable

In the steps below, we will create an LWC data table with implemented row actions: edit, view, and delete.

1. We will fetch the opportunity data dynamically for the data table, so first, we will create a controller class that we will call in the LWC component.

public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities() {
        return [SELECT Id, Name, StageName, Amount FROM Opportunity LIMIT 10];
    }
}

2. Now, create an LWC component and enter the code below in the HTML template.

<template>
    <lightning-card title="LWC Table with Row Actions">
        <lightning-datatable
            key-field="Id"
            data={tableData}
            columns={columns}
            onrowaction={handleRowAction}>
        </lightning-datatable>
    </lightning-card>
</template>

In the above HTML template, the parameter key-field=”Id” ensures each row has a unique ID. Then the data={tableData} binds the table to the tableData variable containing Opportunity records. The onrowaction={handleRowAction} triggers an event handler from the JS file when a user selects actions like edit or delete.

3. After this, enter the code below in the JS file to define the navigation logic to redirect to the edit and view page when the user selects a view or edit action. In the same event handler, we have defined the logic for the row action of deleting the record.

import { LightningElement, track, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';

const columns = [
    { label: 'Name', fieldName: 'Name', type: 'text' },
    { label: 'Stage', fieldName: 'StageName', type: 'text' },
    { label: 'Amount', fieldName: 'Amount', type: 'currency' },
    {
        type: 'action',
        typeAttributes: {
            rowActions: [
                { label: 'View', name: 'view' },
                { label: 'Edit', name: 'edit' },
                { label: 'Delete', name: 'delete' }
            ]
        }
    }
];

export default class DatatableRowActions extends NavigationMixin(LightningElement) {
    @track tableData = [];
    columns = columns;

    @wire(getOpportunities)
    wiredOpportunities({ error, data }) {
        if (data) {
            this.tableData = data;
        } else if (error) {
            console.error(error);
        }
    }

    handleRowAction(event) {
        const actionName = event.detail.action.name;
        const row = event.