Lightning Datatable

• Let us create a LWC component and edit the meta file to make the component visible in the AppPage

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

• The HTML file will have a lightning-datatable which will fetch the value from the Javascript.

<template>
    <lightning-card>
        <template if:true={contactsDisplayed}>
            <lightning-datatable
            key-field="id"
            data ={contactsDisplayed}
            columns={columns}
        >
        </lightning-datatable>
        </template>
        <template if:true={error}>
            <p>Error Occured : {error}</p>
        </template>
    </lightning-card>
</template>

• The lightning-datatable takes three attribute

  Key-field = "id" : This will be used to differentiate records based on ID.

  data ={contactsDisplayed} : fething the data from the javascript.

  columns={columns} : It helps us to set the column heading and field values to be displayed.

• In order to fetch the records from Contact object we need to take the help of Apex Class so we will create an Apex Class name - ContactHelper.

• Create an @AuraEnabled method which will return a List<Contact>

public with sharing class contactHelper {
    @AuraEnabled(cacheable = true)
    public static List<Contact> getContact(){
        try {
            return [select id , name , phone from Contact];
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

• We will call the above Apex Class method in Javascript file.

-In the Javascript file firstly we will set the column definition

const COLUMNS =[
    {label:'Contact Name', fieldName:'Name'},
    {label:'Phone',fieldName:'Phone'}
]

The label describes what column header will be displayed and fieldName will have the field-api-name

we will create a @track column property and store the COLUMNS array created. In the HTML markup you can see that we have called this @track column property as an attribute in <lightning-datatable>

-Let us now import our ContactHelper apex class method using the import statement. import getContacts from '@salesforce/apex/contactHelper.getContact';

-We will pass the getContacts in the wire adapter method as a parameter which will return List<Contact>.

    @wire(getContacts)
    contacts({data,error}){
        if(data)
        {
            this.contactsDisplayed = data;
            console.table(data);
            console.table(this.contactsDisplayed);
        }
        if(error)
        {
            this.error = error;
        }
    }

• Complete Javascript Code:

import { LightningElement ,track , wire} from 'lwc';
import getContacts from '@salesforce/apex/contactHelper.getContact';

const COLUMNS =[
    {label:'Contact Name', fieldName:'Name'},
    {label:'Phone',fieldName:'Phone'}

]
export default class DisplayContacts extends LightningElement {
    @track columns = COLUMNS;
    @track contactsDisplayed;
    @track error;
    @wire(getContacts)
    contacts({data,error}){
        if(data)
        {
            this.contactsDisplayed = data;
            console.table(data);
            console.table(this.contactsDisplayed);
        }
        if(error)
        {
            this.error = error;
        }
    }
}