How to Add Action Buttons in LWC Datatable: Step-by-Step Guide

The lightning-datatable component in Salesforce Lightning Web Components (LWC) offers a clean layout for tabular data. However, real-world business scenarios often require actionable elements within rows—such as editing, viewing, or triggering custom processes directly from table cells.

In plain words: Adding row buttons in an LWC Datatable involves defining column objects with type: 'button' in JavaScript and capturing user clicks using the component's onrowaction handler.

Prerequisites

• Basic understanding of LWC JavaScript structure and HTML templates.
• A Salesforce Developer Edition org, Scratch Org, or Sandbox environment.

Step 1: Create the Component Markup

Start by creating a new component named dataTableWithButtons. Bind the onrowaction event to capture row interactions in your HTML template:

<!-- dataTableWithButtons.html -->
<template>
    <lightning-card title="Contacts Datatable" icon-name="standard:contact">
        <div style="height: 300px;">
            <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}
                onrowaction={handleRowAction}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

Step 2: Configure Button Columns in JavaScript

In your JavaScript file, configure your table columns. Add an entry with type: 'button' and specify label, name, and styling attributes inside typeAttributes:

Column Action Mapping: Set the name property inside typeAttributes to easily distinguish which action was triggered when handling clicks.

// dataTableWithButtons.js
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class DataTableWithButtons extends NavigationMixin(LightningElement) {
    data = [
        { id: '003XXXXXXXXXXXX1', name: 'John Doe', email: 'john@example.com', phone: '555-0100' },
        { id: '003XXXXXXXXXXXX2', name: 'Jane Smith', email: 'jane@example.com', phone: '555-0101' }
    ];

    columns = [
        { label: 'Name', fieldName: 'name', type: 'text' },
        { label: 'Email', fieldName: 'email', type: 'email' },
        { label: 'Phone', fieldName: 'phone', type: 'phone' },
        {
            type: 'button',
            typeAttributes: {
                label: 'Edit',
                name: 'edit',
                title: 'Edit Record',
                disabled: false,
                value: 'edit',
                variant: 'brand'
            }
        }
    ];

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

        if (actionName === 'edit') {
            this.navigateToRecordEditPage(row.id);
        }
    }

    navigateToRecordEditPage(recordId) {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: recordId,
                actionName: 'edit'
            }
        });
    }
}

Developer Trap: Forgetting to wrap your class with NavigationMixin(...) will prevent this[NavigationMixin.Navigate] from executing, causing runtime navigation errors.

Key Summary: Datatable Button Actions

• Column Type: Set column definition type to 'button' or 'button-icon'.
• Event Name: Listen to the onrowaction event on lightning-datatable.
• Payload Access: Use event.detail.action.name for action identify and event.detail.row to retrieve row fields.

Conclusion

Adding action buttons to an LWC Datatable enhances UI functionality and simplifies record administration. By pairing type: 'button' with Salesforce's NavigationMixin, you deliver interactive, responsive record management tools with clean code.