Base Lightning Components enable you to build Lightning applications with rich user interfaces faster and more easily. They also allow you to work with Salesforce data efficiently as these components are built on Lightning Data Service. One of the most used based components is
lightning-datatable (see docs). The Lightning Datatable component enables you to work with multiple records and displays record data in rows and columns, and it supports various features, including inline editing, column formatting, custom datatypes, infinite scrolling, header actions, and more.
Note: If you want to create forms to work with a single record, you can use the
lightning-record-*-form components (see docs).
In this post, we will cover three new datatable recipes that were recently added to the LWC Recipes sample app. These recipes demonstrate how to use inline editing and custom data types with the
Datatable with inline editing
The first two recipes showcase the inline editing feature of the datatables. Each row of the datatable corresponds to a single record. The inline editing feature of the datatable enables users to update the field values of the records without navigating to the records. You can edit multiple records and save them, as illustrated below.
How does it work?
It takes just a few easy steps to implement inline editing of multiple records. You can load and cache the data in the client, enable inline editing for the required fields, display the data using the
lightning-datatable component, and finally update the modified records by implementing a handler. Let’s explore each of these steps.
A list of contact records is loaded using SOQL in an Apex method, as shown below. The
@AuraEnabled(cacheable=true) annotation exposes the method to Lightning components and caches the list of contact records on the client.
Enable inline editing
You can enable inline editing for the rows by specifying which fields are editable, setting
editable: true for the fields in the column definition. For example, First Name and Last Name fields can be set as editable, as shown below.
You can provision data from Apex using the wire service. Here you can see that we have imported the
getContactList method as
getContacts. We then wired it to the contacts property to provide the data.
Display the data
Once we have the data in the contacts property, we can use it in the
lightning-datatable component to display it in the tabular form. The columns property supplies the columns information.
When you edit a field in the datatable, the Save button appears, and the
draftValues property holds the edited field values. You can implement a handler to process the
draftValues when the Save button is pressed.
Update the modified records
The following two recipes showcase the inline editing feature of the datatable. All the above steps are common in both recipes, and they differ only in how we implement the update handler.
- Datatable Inline Edit with UI API — This recipe uses the UI API to update the records
- Datatable Inline Edit with Apex — This recipe uses Apex to update the records
Datatable Inline Edit with UI API recipe
updateRecord method is imported in this recipe from the UI API.
Let’s take a look at the handler implementation.
event.detail.draftValues contains the edited field values of the modified records in JSON format. It is an array of record objects.
updateRecord() method expects the input in the following format. Hence, we need to convert the
draftValues into record objects in the following format before invoking the method.
updateRecord() method can process one record at a time, and it returns a promise. As we can invoke this method asynchronously, we can invoke it for all the records and await all the promises to finish before showing the success message. On successful completion of promises, invoke the
refreshApex method to show fresh data in the datatable. The error can be caught and handled in the catch block. You can check out the complete code of datatableInlineEditWithUiApi in the LWC Recipes repository.
A caveat of this implementation is the
updateRecord() method is invoked multiple times in its own transaction, hence the better way of doing this is updating the records by using Apex as implemented in the following recipe.
Datatable Inline Edit with Apex recipe
The modified records in the
event.detail.draftValues can be updated in bulk using the
update Data Manipulation Language(DML) operation in an Apex controller. Once the contacts are updated, you can display a success message and invoke the
refreshApex() method to show fresh data in the datatable. The error can be caught and handled in the catch block.
updateContacts() method in the ContactController class checks the permissions and updates the records.
You can check out the complete code of datatableInlineEditWithApex in the LWC Recipes repository.
Custom Data Type
The Custom Data Type allows you to create your own data types. You can implement a custom cell, such as a delete-a-row button or image. The
lightning-datatable component supports both standard data types and custom data types; the
lightning-datatable formats and displays the data based on the type you specify for the column. The standard data types include date, email, action, and button, which can be customized with the type attributes. In the following recipe, we will see how to use custom data type with the
Datatable Custom Data Type recipe
We added a recipe that demonstrates how to use custom image type with the
lightning-datatable component. We created Contact Picture as a custom data type.
How does it work?
A custom data type can be implemented in three easy steps. Create a Lightning Web Component and define your custom data types, create a custom data template and add the markup for your data type, and finally, implement your datatable with the newly defined custom data types. Let’s see how we implemented this in the Datatable Custom Data Type recipe.
Define Custom Data Types
You’ll notice that the
CustomDataTypes class extends the
LightningDatatable class. This is a unique scenario where you extend
LightningDatatable only to create custom data types. It is important to note that extending any other class besides
LightningElement to create a Lightning Web Component isn’t supported.
We have created a custom data type called
customPictureType object has three properties.
- template — holds a reference to the custom data template, which has the markup for our data type. We will cover more about this in the next section.
- standardCellLayout — is used to customize the look of
lightning-datatablecells that use custom data types. There are two layouts: standard layout and bare layout. All the standard data types supported in
lightning-datatableuses the standard layout. You can use any of these layouts for your custom cells. Here we are setting it to true, hence using a standard layout.
- typeAttributes — holds a comma-separated list of attributes to be passed to the custom data template. Here we are passing
pictureUrlto display the image. We will see how to use it in the next section.
Create a custom data template
You can add the markup of your custom data type to the Custom Data Template file, which is an HTML file. In this recipe, we want to display the contact’s profile picture in the cell. Hence, we have created a
customPicture.html file and added it to the customDataTypes folder.
customPicture.html has a template that includes an image tag. The
src attribute gets the
pictureUrl from the
typeAttributes, a property of the
customPictureType defined in the previous section. The following section shows how to pass the
Implement the datatable with custom data types
Once the custom data types are defined, you can implement your datatable with the custom data types. We have implemented a component called
You can add a column to your datatable with the custom data type. In the above code, you can see that we have added a column labeled
Contact Picture of
customPictureType. You can also notice that we are assigning
Picture__c field value to the
pictureUrl type attribute. This value will be passed to our custom data type for rendering. We have also imported the
getContactList method as
getContacts and wired it to the
You can use the
c-custom-data-types tag to display the contacts in tabular form as the
CustomDatatypes class extends the
Lightning-datatable (see docs) is one of the most powerful and widely used Lightning base components. Here we covered two critical scenarios with the implementation of three datatable recipes. We showed how to use the inline editing feature using the UI API and Apex, and how these implementations match and differ. We also showed how to use custom data types with the Lightning Datatable component. You can implement a variety of complex scenarios easily using Lightning Datatables. Checkout LWC Recipes and explore the three datatable recipes along with their tests. You can also explore other examples in LWC Recipes, tweak the code, re-use it, and also contribute.
- Lightning Datatable documentation
- LWC Developer Guide – Display Record Data in a Table
- Lightning Web Components Recipes
About the author
Satya Sekhar Chegondi is a Senior Developer Advocate at Salesforce focusing on Lightning Web Components and developer tools. He is passionate about sharing his knowledge about all possible with the Salesforce Platform with various audiences in an understandable format. You can follow him on Twitter @SatyaSfdc.