Using Lightning Datatable in LWC with Apex

The ability to show data in a tabular format is one of the most important UI designs that is used in all web technologies. It not only gives a quick overview of the kind of data it is but also helps you compare. In this article, we will walk through how to use Lightning Datatable in LWC with Apex.

Prerequisite

• You should know the basics of LWC.
• Should know how to create Apex Class and use SOQL.
• Have VSCode installed with project setup and authorized to the salesforce org.

Scenario

For this article, we will want to show all related Contacts of an Account in a related list.

Step 1: Create an Apex Class, Query, and Return Contact records

Create an Apex class with an @AuraEnabled method that will return the List of Contact records.

The method accepts a String parameter called accountId, with this accountId we will query the contact records fields that we want to show in the lightning datatable.

Apex Class

public with sharing class ContactController {
   
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactRecords(String accountId){
        List<Contact> contactList = new List<Contact>();
        system.debug('accountId : '+accountId);
        try {

            if(accountId!=null){
                contactList = [Select id,Email,Name,Phone,Account.Name,Owner.Name from Contact where AccountId=:accountId];
            }
            system.debug('contactList :'+contactList);
            return contactList;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

Step 2:Create LWC Component to call the apex class and show contacts in the UI

We will now create an LWC Component and call the Apex method from the javascript file.

HTML Code

<template>
    <lightning-datatable
            key-field="id"
            data={contactList}
            columns={columns}>
    </lightning-datatable>
</template>

In the html file, we will paste the above code. Don’t worry we will explain how contactList and columns values are used later in this article.

For now we can just paste the code and understand the javascript part.

JS File Code

import { LightningElement,wire,api } from 'lwc';
import getContactRecords from '@salesforce/apex/ContactController.getContactRecords';

export default class RelatedAccountContacts extends LightningElement {
     columns = [
        { label: 'Email', fieldName: 'Email', type: 'email' },
        { label: 'Name', fieldName: 'Name', type: 'text' }
    ];
    
    @api recordId; 
    contactList;

    @wire(getContactRecords,{accountId:'$recordId'})
    contactListRec({data,error}){
        
        if(data){
            console.log('data : ',data);
            this.contactList = data;
        }else if(error){
            console.log('error',error);
        }
    }
}

The lightning-datatable accepts two important attributes that help it to show the data in the format we want.

1. We pass the names of the columns, their configurations, and field mapping for the table.
2. The list of data that needs to be displayed in the table.

The column array contains the following attributes:

1. label: This value is shown as the column name
2. fieldName: This value contains the name of the field, from the list of contact records returned from Apex, that should map to this column label.
3. type: The value mentioned here decides how the data is represented in the UI. For example: If the type is URL, the data is represented as a hyperlink.

Note: Find the complete list of attributes and specification about lightning-datatable here

We then use the @api decorator for recordId(this should be named recordId only) to fetch the id of the Account record dynamically, where this LWC component will be placed(from the Lightning Builder).

We use the @wire decorator to call the Apex method, and assign ‘$recordId’ to accountId(as mentioned in the Apex class). This will be passed as the method attributes when making a call.

Note: In realtime, when the page loads, the ‘$recordId’ is replaced with the id of the Account record dynamically.

The callback method is called after receiving the response from Apex. We then check if data is present or if there is an error in the apex call. Assign the data returned to the contactList variable, which is used in the lightning-datatable attribute.

Important: The fieldName value should exactly match with the column name returned from Apex and is stored in contactList variable.

Demo

Above is the final result of the code implementation. As you can see, the Email column is rendered as an hyperlink, this is because we mentioned type as ’email’ for the Email field in our columns array.

This article is a foundation of creating datatable in LWC with Apex. There are many complex scenarios that you can implement based on your requirement, some of these we will cover in our future posts. If there is any specific post that you would like to read about datatables in LWC, do let us know in the comments below.

You can read the complete documentation on lightning-datatable by Salesforce here.