Hello friends, In this post you will see an example, that helps you to edit record directly from datatable. In other words, you can say inline editing in lightning datatable in lighting web component. So let's get started.

Inline editing in datatable in lightning web component

In this example, only one record at  a time will be updated through datatable. When a user presses the Tab key or clicks outside the cell after making changes in record, the datatable footer appears with the Cancel and Save buttons. User can hit the appropriate button to perform the action.

InlineEditorHandler.apxc

 public class InlineEditorHandler {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id,Name,AccountNumber,Phone FROM Account WITH SECURITY_ENFORCED order by Name asc limit 5];
    }
 }
DatatableInlineEditing.html
 <template>
  <lightning-card title="Inline Editing Datatable Example" icon-name="custom:custom63">
	<div class="slds-m-around_medium">
		<template if:true={account.data}>
			<lightning-datatable key-field="Id" data={account.data} columns={columns} onsave={handleSave}
				draft-values={draftValues}>
			</lightning-datatable>
		</template>
		<template if:true={account.error}>
			<!-- handle Apex error -->
		</template>
	</div>
  </lightning-card>
 </template>
DatatableInlineEditing.js
 import { LightningElement, wire, api } from 'lwc';
 import getAccounts from '@salesforce/apex/InlineEditorHandler.getAccounts';
 import { refreshApex } from '@salesforce/apex';
 import { updateRecord } from 'lightning/uiRecordApi';
 import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 import ID_FIELD from '@salesforce/schema/Account.Id';
 import NAME_FIELD from '@salesforce/schema/Account.Name';
 import ACCOUNTNUMBER_FIELD from '@salesforce/schema/Account.AccountNumber';
 import PHONE_FIELD from '@salesforce/schema/Account.Phone';

 const COLUMNS = [
    { label: 'Name', fieldName: 'Name', editable: true },
    { label: 'Account Number', fieldName: 'AccountNumber', editable: true },
    { label: 'Phone', fieldName: 'Phone', type: 'phone', editable: true }
 ];
 export default class DatatableInlineEditing extends LightningElement {
    @api recordId;
    columns = COLUMNS;
    draftValues = [];

    @wire(getAccounts) account;

    handleSave(event) {
        const fields = {};
        fields[ID_FIELD.fieldApiName] = event.detail.draftValues[0].Id;
        fields[NAME_FIELD.fieldApiName] = event.detail.draftValues[0].Name;
        fields[ACCOUNTNUMBER_FIELD.fieldApiName] = event.detail.draftValues[0].AccountNumber;
        fields[PHONE_FIELD.fieldApiName] = event.detail.draftValues[0].Phone;
        const recordInput = { fields };

        updateRecord(recordInput).then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Account updated',
                    variant: 'success'
                })
            );
            // Display fresh data in the datatable
            return refreshApex(this.account).then(() => {
                // Clear all draft values in the datatable
                this.draftValues = [];
            });
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error updating or reloading record',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        });
    }
 }
DatatableInlineEditing.js-meta.xml
 <?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__HomePage</target>
	</targets>
 </LightningComponentBundle>

Output:

 

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.