Amit Salesforce | Salesforce Tutorial: Datatable

Welcome back, In this post we are going to create another lightning web component (LWC), Where we can search contact records and will display result using lightning-datatable lwc component. Lightning datatable tag is same as lightning:datatable tag in aura. In this lightning Datatable example we will also talk about lightning datatable inline edit.

lighning-datatable syntax:-
                    <lightning-datatable key-field="Id"
                                            data={contacts}
                                            columns={columns}
                                            hide-checkbox-column="true"
                                            show-row-number-column="true"
                                            >
                    </lightning-datatable>

If you want to hide the checkbox from table then add "hide-checkbox-column"
If you want to show row number then please add "show-row-number-column".

Let's see how we can create custom record search functionality in lightning web components. I hope VsCode is already setup on you machine and you know how to create Lightning Web Component. If not please check this post.

1) Create Apex Class

public with sharing class LWCDataTableExample {

    @AuraEnabled(Cacheable=true)

    public static List <Contact> getContacts(String strLastName) {

        String strLastNameLike = '%'+strLastName+'%';

        List<Contact> contList = [SELECT Id,FirstName,LastName,Account.Name

                                   FROM Contact 

                                   Where LastName like :strLastNameLike

                                   LIMIT 10];

        return contList;

    }    

}

This apex class we will call from Lightning web components. If you want to learn more about how to call apex class from lightning web components then please check this post.

2) Create Lightning Web Components.

lwcLightningDataTableDemo.html

<template>

    <lightning-card title = "Search Contacts" icon-name = "custom:custom63">  

        <div class = "slds-m-around_medium">  

            <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search" > 

            </lightning-input>  

            <template if:true = {contacts}>  

                <div style="height: 300px;">  

                    <lightning-datatable key-field="Id"  

                                            data={contacts}  

                                            columns={columns}  

                                            hide-checkbox-column="true"  

                                            show-row-number-column="true">  

                    </lightning-datatable>  

                </div>                   

            </template>

            <template if:true = {error}>  

                {error}>  

            </template>  

        </div>  

    </lightning-card>  

</template>

lwcLightningDataTableDemo.js

import { LightningElement,track } from 'lwc';

import getContacts from '@salesforce/apex/LWCDataTableExample.getContacts';

const columns = [  

    { label: 'Id', fieldName: 'Id' },  

    { label: 'First Name', fieldName: 'FirstName' },  

    { label: 'Last Name', fieldName: 'LastName' }

]; 

export default class LwcLightningDataTableDemo extends LightningElement {

    @track contacts;

    @track error;  

    @track columns = columns;

    handleKeyChange( event ) {  

        const strLastName = event.target.value;  

        if ( strLastName ) {  

            getContacts( { strLastName } )    

            .then(result => {  

                this.contacts = result;  

                console.log('I am here',this.contacts);

               // console.log(JSON.stringify(result, null, '\t'));

            })  

            .catch(error => {  

                this.error = error;  

            });  

        } else  

        this.contacts = undefined;  

    }

}

lwcLightningDataTableDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcLightningDataTableDemo">

    <apiVersion>47.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__Tab</target>

    </targets>

</LightningComponentBundle>

NOTE:- Now from Winter 20 release we can Add Lightning Web Components as Custom Tabs for that we need to add lightning__Tab target to the component’s configuration file.

Now Your page will look like this

Lightning datatable inline edit

Let's see how we can do inline Edit

For inline editing we can use the uiRecordAPI. For that we need to import the "lightning/uiRecordApi"
We also need to add "onsave={handleSave}" and "draft-values={draftValues}"on lightning-datatable and on column we need to add enable "editable: true".
Then we need to add handler Save method.

Let's see how our code will look like:

lwcLightningDataTableDemo.html

<template>

    <lightning-card title = "Search Contacts" icon-name = "custom:custom63">  

        <div class = "slds-m-around_medium">  

            <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search" > 

            </lightning-input>  

            <template if:true = {contacts}>  

                <div style="height: 300px;">  

                    <lightning-datatable key-field="Id"  

                                            data={contacts}  

                                            columns={columns}  

                                            hide-checkbox-column="true"  

                                            show-row-number-column="true"

                                            onsave={handleSave}
                                            draft-values={draftValues}                                            >  

                    </lightning-datatable>  

                </div>                   

            </template>

            <template if:true = {error}>  

                {error}>  

            </template>  

        </div>  

    </lightning-card>  

</template>

lwcLightningDataTableDemo.js

import { LightningElement,track } from 'lwc';

import getContacts from '@salesforce/apex/LWCDataTableExample.getContacts';

import { updateRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const columns = [  

    { label: 'Id', fieldName: 'Id' },  

    { label: 'First Name', fieldName: 'FirstName', editable: true  },  

    { label: 'Last Name', fieldName: 'LastName', editable: true  }

]; 

export default class LwcLightningDataTableDemo extends LightningElement {

    @track contacts;

    @track error;  

    @track columns = columns;

    @track draftValues = [];

    handleKeyChange( event ) {  

        const strLastName = event.target.value;  

        if ( strLastName ) {  

            getContacts( { strLastName } )    

            .then(result => {  

                this.contacts = result;  

                // console.log('I am here',this.contacts);

                // console.log(JSON.stringify(result, null, '\t'));

            })  

            .catch(error => {  

                this.error = error;  

            });  

        } else  

        this.contacts = undefined;  

    }

    handleSave(event) {
        const recordInputs =  event.detail.draftValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            return { fields };
        });
    
        const promises = recordInputs.map(recordInput => updateRecord(recordInput));
        
        Promise.all(promises).then(contacts => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'All Contacts updated',
                    variant: 'success'
                })
            );
             // Clear all draft values
             this.draftValues = [];
    
             // Display fresh data in the datatable
             return refreshApex(this.contact);
        }).catch(error => {
            // Handle error
        });
    }

}