+ Start a Discussion
Sisodia SaurabhSisodia Saurabh 

lightning datatable onsort event not firing

Hello Everyone,
I am trying to impelement column sorting. When component loads it sorts the default coulmns value but  Lightning: datatable "Onsort" event is not firing, I am getting column names as text only , nothing else(like arrow or something) to click for sorting event firing.

below is my code:
TestAccountComponent
    <aura:attribute name="sortedBy" type="String" default="LastName"/>
    <aura:attribute name="sortedDirection" type="String" default="asc"/>
     <aura:attribute name="defaultSortDirection" type="String"/>
<lightning:datatable minColumnWidth="400px" 
                             data="{! v.Contact }" 
                             columns="{! v.Columns }"  
                             keyField="Id" 
                             hideCheckboxColumn="true"  
                             onsort="{!c.updateColumnSorting}" 
                             sortedBy="{!v.sortedBy}" 
                             sortedDirection="{!v.sortedDirection}"
                             defaultSortDirection="{! v.defaultSortDirection }"/> 

Controller:

getContact : function(component, event, helper) {
        debugger;
        helper.getStatus(component);
        helper.getLeadSourceOpt(component);
        
        component.set("v.Columns", [
            {label:"FirstName", fieldName:"FirstName", type:"text"},
            {label:"LastName", fieldName:"LastName", type:"text"},
            {label:"Phone", fieldName:"Phone", type:"text"},
            {label:"Email", fieldName:"Email", type:"text"},
            {label:"Contact_Status__c", fieldName:"Contact_Status__c", type:"text"},
             {label:"LeadSource", fieldName:"LeadSource", type:"text"}
        ]);
        var rcdID = component.get("v.recordId");
        var action = component.get("c.fetchContactList"); 
        action.setParams({ 
            recordId : rcdID
    });
        action.setCallback(this, function(data) {
          var state = data.getState();
          if (state === "SUCCESS") {
           component.set("v.Contact", data.getReturnValue());
           helper.sortData(component, component.get("v.sortedBy"), component.get("v.sortedDirection"));
            }
    });        
$A.enqueueAction(action);
    },
updateColumnSorting : function (cmp, event, helper) {
        var fieldName = event.getParam('fieldName');
       // var sortDirection = event.getParam('sortDirection');
       var sortDirection = component.get("v.sortDirection") == 'asc' ? 'desc' : 'asc';
        cmp.set("v.sortedBy", fieldName);
        cmp.set("v.sortedDirection", sortDirection);
        helper.sortData(cmp, fieldName, sortDirection);
    }
    
Helper::
 sortData : function (cmp, fieldname, sortDirection) {
         debugger;
        var data = cmp.get("v.Contact");
        var reverse = sortDirection !== 'asc';
        data.sort(this.sortBy(fieldname, reverse))
        cmp.set("v.Contact", data);
    },
    sortBy : function (field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    }

Apex class::
@AuraEnabled
    public static List<contact> fetchContactList(Id recordId)
    {
        system.debug('fetchContactList');
        return [Select id, FirstName, LastName, Phone, Email, Contact_Status__c, LeadSource from Contact where AccountId=:recordId];
    }

Thanks.
Saurabh Sisodia
Raj VakatiRaj Vakati

Refer this link  .. you have an detail example 

https://rajvakati.com/2018/02/18/usage-of-lightningdatatable/

 
onsort="{! c.updateColumnSorting }"
 
// Client-side controller called by the onsort event handler
    updateColumnSorting: function (cmp, event, helper) {
        var fieldName = event.getParam('fieldName');
        var sortDirection = event.getParam('sortDirection');
        // assign the latest attribute with the sorted column fieldName and sorted direction
        cmp.set("v.sortedBy", fieldName);
        cmp.set("v.sortedDirection", sortDirection);
        helper.sortData(cmp, fieldName, sortDirection);
    },
 
sortData: function (cmp, fieldName, sortDirection) {
        var data = cmp.get("v.data");
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        data.sort(this.sortBy(fieldName, reverse))
        cmp.set("v.data", data);
    },
    sortBy: function (field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
        function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    },

 
Sisodia SaurabhSisodia Saurabh
Hi Raj,
Thanks for replying. I figured out why it was not working, I missed sortable: true while creating columns in controller.