Introduction

The main concepts included in this recipe are:

• Displaying a lightning-datatable component with data retrieved from an Apex function.
• Modifying the values directly on the cells.
• Finally, all changes are saved back using the updateRecord wire adapter, from the User Interface API resource.

Notice that the way that the parameter RecordInputis created is different from the previous LWC LdsGenerateRecordInputForCreate recipe.

<aside> 📂 Find this LWC in this folder: force-app\\main\\default\\lwc\\datatableInlineEditWithUiApi

</aside>

Template File

lightning-datatable displays tabular data where each column renders the content based on the data type. For example, an email address is displayed as a hyperlink with the mailto: URL scheme by specifying the email type. The default data type on a column is text. This component can be populated during initialization using the data, columns, and key-field attributes, as done in this LWC. The key-field attribute is required, associating each row with a unique identifier.

...
	<div class="slds-var-m-around_medium">
	    <template lwc:if={contacts.data}>
	        <lightning-datatable
	            key-field="Id"
	            data={contacts.data}
	            columns={columns}
	            onsave={handleSave}
	            draft-values={draftValues}
	            hide-checkbox-column
	        >
	        </lightning-datatable>
	    </template>
	    <template lwc:elseif={contacts.error}>
	        <c-error-panel errors={contacts.error}></c-error-panel>
	    </template>
	</div>
...

Javascript file

The COLS constant provides a straightforward definition of the columns that are shown.

The attribute typeallows to show the right field format according to the field nature, a phone with hyphens, an email address with a link, etc.

...
{
	label: 'Phone',
  fieldName: PHONE_FIELD.fieldApiName,
	type: 'phone',
  editable: true
}
...

Invoking the Apex function to retrieve the data

As we detailed in the recipe Recipes in the Data Service Tab in order to use the Apex function we need an import:

import getContacts from '@salesforce/apex/ContactController.getContactList';

This is a quite simple function:

public static List<Contact> getContactList() {
  return [
      SELECT
          Id, Name, FirstName, LastName, Title, Phone, Email, Picture__c
      FROM Contact
      WHERE Picture__c != NULL
      WITH USER_MODE
      LIMIT 10
  ];
}

To retrieve the records we invoke that function using a wire adapter, and the results are placed in the contactsvariable: