Using lightning-datatable to the MAX

Posted by: Lourdes Montero on February 28th, 2020.

The Lightning Web Component(LWC) framework is very popular because it provides better performance to your applications, it adheres to web standards, it is easy to learn, and so much more. Salesforce provides out-of-the-box components, called base LWC. In this post, I will go deep into the lightning-datatable base component.

This component is great for displaying data in a table format, but it can do SO MUCH MORE. It has great features like inline editing, infinite scrolling, column level actions, and row level actions. You can also create your custom data type if the component does't support your use case. The cool thing about creating the custom data type is that you get to keep all the lightning-datatable functionality and adding your own on top of it.

In this blog I will go through a scenario I have implemented in the past. This time, I will implement the solution using the lightning-datatable component instead of using lightning-layout and lightning-record-edit-form.

Requirements:

The business wants a component that can be added to an Account page layout.
It will allow the user to enter new rows of contact information, edit them, and delete them.
Each row will have 6 columns. As seen in the image below.
Pre-Tax Income and Tax Paid are custom currency fields on the contact object.
Total Income is a column that will display the sum of Pre-Tax Income and Tax Paid as they change.

This is the mockup:

Development steps:

Create three fields in the Contact object:

Tax_Paid__c
- Type: currency
Pre_Tax_Income__c
- Type: currency
Total_Income__c
- Type: Formula
- Tax_Paid__c + Pre_Tax_Income__c

Set up development tools

Setup your VS code instance
- If you are still having issues, check out this Trailhead Module.
Enable your custom domain
Import three components from the LWC recipes into your project.

Create the components

See the source code here: Solution Repository.
All the code implementation is done in the relatedContacts component. Since I am using the lightning-datatable base component, it saves me from having to build functionality, like the Contact form and the table layout.
relatedContacts.html

Notice how all I have in the html file is a lightning-card displaying a lightning-datatable, the c-error-panel component if there is an error, the button to add a new row, and the c-modal component to verify the Contact's deletion.
Let's dig a little deeper on the lightning-datatable attributes I am passing.
- key-field: This is very necessary and each 'Id' has to be unique. This component uses the 'Id' attribute to implement validations, find and set draft values. If there are two or more rows with the same Id, weird stuff will happen to your table.
- data: This attribute will contain the data, in the form of an array of JSON objects. If you do a query on your apex class and return a List of an SObject, you could bind that return value to the data attribute without extra modification.
- columns: Will contain an array of JSON objects, with each JSON being each column. Since I am going to be using inline editing, it is important that we map the correct field API name to the columns.
- onsave: Since I am using inline editing, once the table is edited, a Save and Cancel button will appear automatically. The onsave attribute handles pressing on the save button.'
- oncellchange: Calls a function called handleCellChange every time any cell is updated via inline editing.
- onrowaction: This component allows for one or more actions to be performed on a row. In this use case, I am only using the delete button, but setting the type of the column to be 'button-icon'.
- hide-checkbox-column: This attribute is set to true since I don't need the multiple row select functionality for this use case.
- errors: This attribute expects a JSON object with a specific structure indicating which row and specific field has failed a validation. You have total control over the validation and the message to display.
- is-loading: You can bind this attribute to a property changes to true when the component does a server side call, or does some validation, or whenever you think it necessary to show the loading icon.

relatedContacts.js

I am importing the apex methods getRelatedContacts and upsertContacts in order to use them in the code.
Notice how I am importing also the deleteRecord function from the uiRecordApi in line 4 to use it in the future. This function is provided by salesforce and many other useful ones. See more in this documentation.
In line 5 I am importing some utility functions from file relatedContactsUtil.js. I created these functions in a separate file to keep the code organized.
Notice, in line 13, I am initializing the columns that will be populated in the datatable. Since I am using inline-editing, notice how some of the columns have the fieldName property set to the field's api name, and the editable property set to true.
- The last column will be a delete button. The lightning-datatable component has functionality that allows you to add a button with any slds icon to perform row level actions. In this case, I am using utility:delete. Notice how I am giving it a name property, that is how I can identify that the user clicked on it and not in other button from the table.
Since this is a component that expects to be dropped into a record detail page, it should have a public recordId property to store the record's Id. Notice the @api decorator, this makes the property public, and can be updated by a parent component.
I declared a contacts property that will store the contacts in the table. The @track decorator is necessary because we need to component to observe the contacts's properties.
Notice how i declared two error properties, one is tableError and the other one is error. The error property is related to general component errors, like error in server side calls. The tableError property stores the validation errors that will show in the lightning-datatable component.
The connectedCallback function in line 41 gets called when the component is inserted into the DOM. This function calls the refreshData function that will populate the contacts property.
When the user adds a new row to the table, an empty contact record gets added to the contacts property, since this is a new contact, it doesn't have an Id. The record Id is required in the lightning-datatable component, so, in this case, I created the getter function temporaryId that will return a temporary Id.
The handleSave function gets called when the user presses the save button on the lightning-datatable.
- In line 52, I am getting the changed values to upsert by getting the datatable's draftValues. This property will only contain the fields that have changed with their values with their respective Ids.
- In line 53 I am calling the validate function, and it it returns true, the function continues saving the contacts.
- In line 58 I am calling the modifyForInsert function which is imported from file relatedContactsUtil.js in line 5.
- In line 60 I am calling the upsertContacts function imperatively. I am importing the apex method in line 3. After the call succeeds, I am calling the refreshData function to refresh the table, and clear the draftValues in line 64.
The handleCellChange function gets called every time a field gets updated.
The handleAddNewRow function gets called when the user presses the "Add new row" button. The function adds a new contact to the table by pushing a JSON object with only the Id populated with a temporary Id.
The handleRowAction function gets executed when any row action happens. In this case, the row action is the delete button. When clicking on the delete button, this function stores the row selected in the rowToDelete property, and it opens a modal asking the user if they are sure about the deletion of the contact.
The handleYesDelete function gets called when the user approves the deletion of a contact in the modal. If the row to delete has the temporary keyword, it means that the contact wasn't inserted yet, so I only need to delete it from the table and from the table draft values(the list of contact records that have changed, this is a public property from the lightning-datatable component). If the row to delete has a real Id, I delete it from the database my calling the deleteContactDB function.

relatedContactsUtil.js

This file has helper functions that I moved to a separate file to keep the code organized.

This is the end result:

Conclusions

This is a perfect example of how you can utilize base components in your custom applications. Here, I used lightning-datatable to create a quick contact creation table. I have accomplished ALL of the requirements( inline editing, adding and removing contacts, refreshing total value column) by only using one base component. In a previous post, I completed the same requirements, but using lighting-record-edit-form and lightning-layout, where I felt like I had more freedom, and leveraged the field validation functionality that the lighting-record-edit-form provides. The lightning-datatable is a very powerful component with a lot of functionality. I cannot wait to explore it more.