Display Data in a Table with Inline Editing
To display Salesforce data in a table, use the
lightning-datatable component. The component supports inline editing, which enables users to update a field value without navigating to the record.
This example uses SOQL in an Apex method to load contacts on an account record.
@AuraEnabled(cacheable=true) annotation exposes the method to Lightning components and caches the list of contacts on the client. The
accId parameter filters the contacts for the given account record.
If the Apex method returns data, the HTML template displays the
lightning-datatable component with editable first name and last name fields (1). When you edit a field, the Save button appears, and you can click it to update the contact record. Updating a contact record successfully also updates the record data in the related lists (2), and other components on the page that are managed by Lightning Data Service.
This example is based on the
datatableInlineEditWithUiApi component in the lwc-recipes repo. This version differs slightly to enable the datatable to be used on a record page.
To enable inline editing, configure the
lightning-datatable component as shown in the following
key-field attribute associates each row with a contact record. The
data attribute holds the data retrieved through the wire service from either an Apex method or a wire adapter. The
columns attribute assigns a record field to each column and customizes the behavior of the columns. When a user edits a cell, the updated value is stored in
Clicking the Save button triggers the
save event. Use the
onsave event handler to persist changes in the datatable. In the example, the
onsave event handler calls
updateRecord(recordInput, clientOptions) to save record changes.
For a list of attributes and supported features, see
A row of data corresponds to a single record and each column displays the value of one of that record’s fields. To enable inline editing, specify which fields are editable by setting
editable: true in the column definition. In this example, the First Name and Last Name fields are editable. Since the Name field on contacts is a compound field, you must use the First Name and Last Name fields separately.
@wire(getContacts) provisions data to
contacts.data and the record Id to
When you edit fields,
event.detail.draftValues stores the edited field values and the record
Id as an array of objects.
When you press the Tab key or click outside the cell after making changes, the datatable footer appears with the Cancel and Save buttons. To hide the datatable footer, clear the
draftValues property. The
onsave event handler clears
draftValues after copying the values into a record object.
updateRecord(recordInput, clientOptions) to save the new field values to the records.
updateRecord() expects a single record only. Pass in a
recordInput object for each record whose fields you’re updating. In this example, the
record parameter contains an object with the updated fields for multiple records. To update multiple records simultaneously, pass the parameter to
updateRecord() for processing.
After a successful save, the
onsave event handler dispatches the
ShowToastEvent event to display a success toast message.
After a record is updated,
refreshApex(this.contacts) refreshes the list of contacts from the Apex method so that the datatable always presents the latest data.
For bulk record updates in a single transaction, we recommend using Apex. See the Enabling Inline Editing Using Apex section.
For bulk record updates, pass your record changes to an Apex controller that calls an
update Data Manipulation Language (DML) operation. In this example, the edited field values are passed to the
updateContacts Apex controller. Since the records are updated by Apex, you must notify Lightning Data Service (LDS) using the
notifyRecordUpdateAvailable(recordIds) function so that the Lightning Data Service cache and wires are refreshed.
This example is based on the
datatableInlineEditWithApex component in the github.com/trailheadapps/lwc-recipes repo. This version differs slightly by using Apex without LDS.
apexContactsForAccount.js file you created in the previous example, import the Apex controller and the
handleSave() function to handle the edited values. To ensure that
notifyRecordUpdateAvailable() is called after the record is updated via Apex, use the
await pattern or a Promise chain. This example uses
updateContacts Apex controller deserializes the JSON string containing the updated fields into a Contact object. It updates the changed records using the
update DML operation.