sfdc-learn #10 : Data Table Sorting in lwc Using Apex Class Controller

Data table sorting using apex class

dataTableSortingUsingApex.html

<template>

    <lightning-card title="Data Sorting in Lightning Datatable Using Apex" 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>

dataTableSortingUsingApex.js

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

import getContactListDataBySort from '@salesforce/apex/DatatableOperationController.getContactListBySort';

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 = 'desc';

    @track sortBy = 'Createddate';

    // Get Data from contact Object

    @wire(getContactListDataBySort, {sortField: '$sortBy', sortDirection: '$sortDirection'})

         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

    }

   

}

dataTableSortingUsingApex.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:

public with sharing class DatatableOperationController {

@AuraEnabled (cacheable=true)

   public static List<Contact> getContactListBySort( String sortField, String sortDirection){

    try {

        String strQuery = 'SELECT Id,FirstName, Lastname, Phone, Email FROM Contact';

        if(sortField != null && sortDirection != null){

            strQuery +=' ORDER BY '+sortField+' '+sortDirection +' LIMIT 5' ;

        }

       

        return Database.query(strQuery);

    } catch (Exception e) {

        throw new AuraHandledException(e.getMessage());

    }

   }

}

I have added this component on Home page  as below and check LastName Data in currently ascending order

Click on LastName sort descending arrow and Check LastName data sorted desc order on data table