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.

Table of Contents

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: this.draftValues })
            .then(() => {
                this.dispatchEvent(new ShowToastEvent({
                    title: 'Success',
                    message: 'Records updated successfully',
                    variant: 'success'
                }));
                this.draftValues = [];
                return refreshApex(this.accounts);
            })
            .catch(error => {
                console.error('Error updating records: ', error);
            });
    }
}

In the above code, the COLUMNS defines the structure of the data table and marks fields as editable. The @wire method will fetch the accounts, and then the lightning event handleCellChange() will capture changes made in the table.

At last, the handleSave() event will send the modified records to the Apex method and update those records.

3. Expose the LWC data table component to the Lightning pages by using the code below inside the LightningComponentBundle tag.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

4. Navigate to the Lightning page where you want to deploy the editable data table, click on the settings icon, then select Edit Page.

5. Drag and drop the LWC components from the custom components to the lightning page layout and click Save to apply the changes.

Salesforce Lightning data table with inline editing

6. Now, the lightning data table will be visible on the lightning page, and from here, we can search and select the account record and perform inline editing on the values of the displayed column.

LWC data table with inline editing in Salesforce

Here, we have to hover the cursor over the record values and click on the edit icon to make the changes. After making changes in the record values, click Save.

Salesforce LWC data table with inline editing

The changes we have made in the Lightning table will reflect the object record page. You can ensure the modified changes through the object record page.

This way, you can implement inline editing to the data table in Salesforce by following the above methods.

Conclusion

In the above steps, we have learned the method for implementing inline editing in the Salesforce Lightning data table, which fetches account records based on user input, allows for inline editing, and updates the records in the Salesforce account object.

By following the above steps, you will be able to efficiently create a lightning data table in Salesforce that can fetch the object records with the help of the apex class and modify the records with inline editing.

How to Implement Data Table with Inline Editing in LWC?

Implementing Inline Editing in Salesforce Lightning Data Table

Conclusion

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK