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

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