How to Implement Data Table with Inline Editing in LWC?

In Salesforce, we have a list view that serves as a data table, and within it, we can implement inline editing to edit object records directly from the list view table without needing to navigate to the record page.

We can also implement inline editing for the data tables that we created using the LWC.

In this Salesforce tutorial, we will learn to implement inline editing to the LWC data tables in Salesforce.

Implementing Inline Editing in Salesforce Lightning Data Table

To implement inline editing in the Salesforce Lightning Data Table, we will create a LWC data table from scratch and implement inline editing within the data table component.

Now, navigate to the Salesforce Developer Console or VS Code, integrated with a connection to your Salesforce CLI, and then follow the steps below.

In this example, I will create an editable Lightning table for the Account object, and the same steps will be followed for any other custom or standard object.

1. First, we will create a controller apex class that will fetch and update the records according to the changes that we will make in the data table.

Create a new apex controller class, AccountController, and enter the code below.

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, Industry, Phone FROM Account LIMIT 10];
    }
    @AuraEnabled
    public static void updateAccounts(List<Account> accountList) {
        update accountList;
    }
}

In the above method, getAccounts will retrieve the accounts, and updateAccounts will make changes in the accounts according to the updated details. The @AuraEnabled annotation enables Lightning components to access Apex methods and properties.

2. Now, we will create a Lightning Web Component and enter the code below in the HTML template.

<template>
    <lightning-card title="Inline Editing DataTable" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <lightning-datatable
                key-field="Id"
                data={accounts}
                columns={columns}
                oncellchange={handleCellChange}
                draft-values={draftValues}
                hide-checkbox-column>
            </lightning-datatable>
            <lightning-button label="Save Changes" variant="brand" onclick={handleSave} class="slds-m-top_medium"></lightning-button>
        </div>
    </lightning-card>
</template>

In this template, “lightning-datatable” will display the contact records in a table format, with inline editing enabled on specific columns.

2. In the JavaScript file, we will define the logic that will handle the inline editing of records in the Lightning data table.

import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import updateAccounts from '@salesforce/apex/AccountController.updateAccounts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';

const COLUMNS = [
    { label: 'Name', fieldName: 'Name', editable: true },
    { label: 'Industry', fieldName: 'Industry', editable: true },
    { label: 'Phone', fieldName: 'Phone', type: 'phone', editable: true }
];

export default class InlineEditingDataTable extends LightningElement {
    @track accounts = [];
    @track draftValues = [];
    columns = COLUMNS;
    
    @wire(getAccounts)
    wiredAccounts({ data, error }) {
        if (data) {
            this.accounts = data;
        } else if (error) {
            console.error(error);
        }
    }

    handleCellChange(event) {
        this.draftValues = event.detail.draftValues;
    }
    
    handleSave() {
        updateAccounts({ accountList