sfdc-learn #9 : Data Table Sorting in lwc

We can implement two ways:

1)Local sorting 

2)Using apex class

1)Local sorting

 Implement when we know the how much data and implement when less amount of data.

datatableOperation.html

<template>

        <lightning-card title="Data Sorting in Lightning Datatable in LWC" icon-name="standard:contact">

            <br />

            <div style="width: auto;">

                <template if:true={contactData}>

                    <lightning-datatable data={contactData}

                        columns={columns}

                        key-field="id"

                        sorted-by={sortBy}

                        sorted-direction={sortDirection}

                        onsort={doSorting}

                        hide-checkbox-column="false">

                   </lightning-datatable>

                </template>

            </div>

        </lightning-card>

</template>

datatableOperation.js

mport { LightningElement, track, wire } from 'lwc';

import getContactListData from '@salesforce/apex/DatatableOperationController.getContactList';

const COLUMNS = [{label:'FirstName', fieldName:'FirstName', sortable:"true"},

                 {label:'LastName', fieldName:'LastName', sortable:"true"},

                 {label:'Phone', fieldName:'Phone', type:'phone', sortable:"true"},

                 {label:'Email', fieldName:'Email', type:'email', sortable:"true"}

                ]

export default class DatatableOperation extends LightningElement {

    @track contactData;

    @track error;

    @track columns = COLUMNS;

    @track sortDirection;

    @track sortBy;

    // Get Data from contact Object

    @wire(getContactListData)

         contactsData(result){

            if(result.data){

               this.contactData = result.data;

            } else if (result.error){

               this.error = result.error;

               this.contactData = undefined;

            }

    }

   

    doSorting(event){

      this.sortBy = event.detail.fieldName;

      this.sortDirection = event.detail.sortDirection

      this.sortData(this.sortBy, this.sortDirection);

    }

   

    // Handle Sorting

    sortData(fieldNametoSort, sortDirection){

        // Conver data in array of objects

        let parseData = JSON.parse(JSON.stringify(this.contactData));

       

        // Return value stored in field which selected for soring...FirstName,LastName

        let keyValue = (a) =>{

            return a[fieldNametoSort];

        }

       

        // Check reverse direction

        let isReverse = sortDirection === 'asc' ? 1: -1;

       

        // Sort data by comparing column value

        parseData.sort((x, y) =>{

            x = keyValue(x) ? keyValue(x):'';

            y = keyValue(y) ? keyValue(y):'';

           

            return isReverse * ((x > y) - ( y > x ));

        });

        // Assign sorted data

        this.contactData = parseData;

    }

}

datatableOperation.js-meta.xml

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

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

    <apiVersion>59.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Apex Controller Class

public with sharing class DatatableOperationController {

   @AuraEnabled (cacheable=true)

   public static List<Contact> getContactList(){

    try {

     List<Contact> contactList = [SELECT Id,FirstName, Lastname, Phone, Email

                                  FROM Contact

                                  order By Createddate desc

                                  Limit 5];

        return contactList;

    } catch (Exception e) {

        throw new AuraHandledException(e.getMessage());

    }

   }

}

I have added this component on Home page  as below:

Click on FirstName to sort descending arrow

Check Sorting for FirstName field on data table