Lightning Datatable Sorting in Lightning Web Components

In this post, we will talk about lightning datatable examples with sorting in lightning web components. We can achieve the column sorting with the help of onsort attribute in datatable and with Apex in LWC.

Lightning Datatable

Lightning datatable provides an onsort attribute that allows us to implement the sorting in lightning datatable. To enable the sorting on the row you need to set sortable to true for the column and set sorted-By to match the fieldName attribute on the column. 

Use onsort event handler to update the table with the new column index and sort direction. The sort event returns the following parameter.

1. fieldName : The fieldName that controls the sorting.
2. sortDirection : The sorting direction. Valid options include ‘asc’ and ‘desc’.

Sorting in Lightning Web Components

We can implement the sorting in LWC with following ways

1. sorting locally 
2. via apex call.

Local Sorting

We use this implementation when we know data elements in lightning datatable is small and limited. Lets see how we can implement Lightning Datatable Sorting in Lightning Web Components with example.

1. Create Apex Class : To select certain contacts using SOQL, use an Apex method. Check this post to learn about how to Call Apex Methods in LWC.
   LWCDataTableSortingExample

public with sharing class LWCDataTableSortingExample {
    @AuraEnabled(Cacheable=true)
    public static List <Contact> getContacts() {
        List<Contact> contList = [ SELECT Id, FirstName, LastName, Phone, Email
                                   FROM Contact
                                   LIMIT 10 ];
        return contList;
    }   
}

2. Create Lightning web component : Create one Lightning web component in your developer org or sandbox.
dataTableSortingLWC.html

<template>
    <lightning-card title="Data Sorting in Lightning Datatable in LWC" icon-name="standard:contact" >
        <br/>
        <div style="width: auto;">
            <template if:true={data}>
                <lightning-datatable data={data}
                                     columns={columns}
                                     key-field="id"
                                     sorted-by={sortBy}
                                     sorted-direction={sortDirection}
                                     onsort={doSorting}
                                     hide-checkbox-column="true"></lightning-datatable>
            </template>
        </div>
    </lightning-card>
</template>

1. In lightning datatable use sorted-by and sorted-direction attribute to define the direction and sorted column.
2. use onsort event to call javascript function to sort your local data.

dataTableSortingLWC.js

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

// datatable columns with row actions. Set sortable = true
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 DataTableSortingLWC extends LightningElement {
    @track data;
    @track columns = columns;
    @track sortBy;
    @track sortDirection;
 
    @wire(getContacts)
    contacts(result) {
        if (result.data) {
            this.data = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }

    doSorting(event) {
        this.sortBy = event.detail.fieldName;
        this.sortDirection = event.detail.sortDirection;
        this.sortData(this.sortBy, this.sortDirection);
    }

    sortData(fieldname, direction) {
        let parseData = JSON.parse(JSON.stringify(this.data));
        // Return the value stored in the field
        let keyValue = (a) => {
            return a[fieldname];
        };
        // cheking reverse direction
        let isReverse = direction === 'asc' ? 1: -1;
        // sorting data
        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; // handling null values
            y = keyValue(y) ? keyValue(y) : '';
            // sorting values based on direction
            return isReverse * ((x > y) - (y > x));
        });
        this.data = parseData;
    }    
}

1.  On which column you want to enable the sorting use sortable: “true”
2. Call your javaScript sorting method from onSorting event.

dataTableSortingLWC.js-meta.xml

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

Sorting by Apex Call

We also have another way of data sorting with Apex class.

1. Create Apex Class : Update your apex method and include sord column and sort order.

public with sharing class LWCDataTableSortingExample {
    @AuraEnabled(Cacheable=true)
    public static List <Contact> getContacts(String field, String sortOrder) {
        String query;
        query  = 'SELECT Id, FirstName, LastName, Phone, Email FROM Contact';
        if(field != null && sortOrder !=null){
            query += ' ORDER BY '+field+' '+sortOrder;
        }
        return Database.query(query);
    }
}

2. Create Lightning web components :- No change required in html file.

<template>
    <lightning-card title="Data Sorting in Lightning Datatable in LWC" icon-name="standard:contact" >
        <br/>
        <div style="width: auto;">
            <template if:true={data}>
                <lightning-datatable data={data}
                                     columns={columns}
                                     key-field="id"
                                     sorted-by={sortBy}
                                     sorted-direction={sortDirection}
                                     onsort={doSorting}
                                     hide-checkbox-column="true"></lightning-datatable>
            </template>
        </div>
    </lightning-card>
</template>

.

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

// datatable columns with row actions. Set sortable = true
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 DataTableSortingLWC extends LightningElement {
    @track data;
    @track columns = columns;
    @track sortBy='FirstName';
    @track sortDirection='asc';
 
    // retrieving the data using wire service
    @wire(getContacts,{field : '$sortBy',sortOrder : '$sortDirection'})
    contacts(result) {
        if (result.data) {
            this.data = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }
    doSorting(event) {
        // calling sortdata function to sort the data based on direction and selected field
        this.sortBy = event.detail.fieldName;
        this.sortDirection = event.detail.sortDirection;
    }
}

1.  Retrieving the data using wire service. Wire will automatically call your apex class when sort field or direction will change
2. Call onSorting method when sort event will fire. 

If you want to load to many record on one single page then use Lazy loading in dataTable.