How to Add Buttons in Salesforce LWC Datatable?

In the Salesforce LWC data table, we can add action buttons to view, edit, or delete a record from the data table. In this Salesforce tutorial, we will learn how to add action buttons in the Salesforce LWC data table for each row.

This Tutorial Covers:

Add buttons in the Salesforce LWC data table

To create a Salesforce LWC data table with action buttons, follow the steps below.

First, we will create a controller class to fetch the object records. In this example, I will fetch the Contact object records.

Enter the code below for the contact controller class.

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
        return [SELECT Id, FirstName, LastName, Email FROM Contact LIMIT 10];
    }
}

Create an LWC component and enter the code below for the HTML file.

<template>
    <lightning-card title="Contacts with Actions" icon-name="standard:contact">
        <template if:true={contacts}>
            <lightning-datatable key-field="Id" data={contacts} columns={columns} hide-checkbox-column="true"
                show-row-number-column="true" onrowaction={handleRowAction}>
            </lightning-datatable>
        </template>
    </lightning-card>
</template>

In the above code, we have used the onrowaction={handleRowAction} attribute that calls the handleRowAction function from the JS file when an action button is clicked.

After this, enter the code below in the LWC component’s JS file that will handle the logic to display the button in the Lightning Data Table.

import { LightningElement, track, wire } from 'lwc';
import fetchContacts from '@salesforce/apex/ContactController.fetchContacts';
import { NavigationMixin } from 'lightning/navigation';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const COLUMNS = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Phone', fieldName: 'Phone' },
    { label: 'Email', fieldName: 'Email' },
    { label: 'Title', fieldName: 'Title' },
    {   type: 'button', label: 'Actions', initialWidth: 250, typeAttributes: {
            label: 'View', name: 'View', title: 'View', iconName: 'utility:preview', variant: 'Brand'
        }
    },
    {   type: 'button', typeAttributes: {
            label: 'Edit', name: 'Edit', title: 'Edit', iconName: 'utility:edit', variant: 'Brand'
        }
    },
    {   type: 'button', typeAttributes: {
            label: 'Delete', name: 'Delete', title: 'Delete', iconName: 'utility:delete', variant: 'destructive'
        }
    }
];

export default class ContactTable extends NavigationMixin(LightningElement) {
    @track contacts;
    columns = COLUMNS;

    @wire(fetchContacts)
    wiredContacts({ data, error }) {
        if (data) {
            this.contacts = data;
        }
    }

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

        if (actionName === 'View' || actionName === 'Edit') {
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: recordId,
                    objectApiName: 'Contact',
                    actionName: actionName.toLowerCase()
                }
            });
        } else if (actionName === 'Delete') {
            deleteRecord(recordId)
                .then(() => {
                    this.dispatchEvent(new ShowToastEvent({
                        title: 'Success',
                        message: 'Record deleted successfully',
                        variant: 'success'
                    }));
                });
        }
    }
}

In the above code, using the @wire method, we have fetched the contact data in the table with action buttons for viewing, editing, and deleting each contact from the row.

We have used the NavigationMixin function to navigate to the view or edit page of the record when the user clicks on the view or edit button.

When a user clicks an action button, the handleRowAction(event)