<aura:component controller="SortableAccountTableController"
                description="Account table with column sorting example"
                implements="flexiPage:availableForAllPageTypes">
    
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
   <!--aura attributes--> 
    <aura:attribute name="contactColumns" type="List"/>
    <aura:attribute name="contactData" type="Object"/>
    <aura:attribute name="sortBy" type="String"/>
    <aura:attribute name="sortDirection" type="String"/>
    <aura:attribute name="filteredData" type="Map"/>
    
    
    
    <!--Page header-->
    <div class="slds-page-header" role="banner">
        <span class="slds-text-heading_medium">Contacts List</span>
        <span class="slds-page-header__title">10 per Page</span>
    </div>
    <!-- New button added -->
	<lightning:button label="New" onclick="{!c.newContact}" />
    
    
    <lightning:input onchange="{!c.searchTable}" type="search" label="Searh" variant="label-hidden" placeholder="Enter search term" aura:id="SearchBox"/>
    
    
    <!--Lightning data table markup-->
    <lightning:datatable aura:id="accountTable"
                         keyField="Id"
                         hideCheckboxColumn="true"
                         columns="{!v.contactColumns}"
                         data="{!v.filteredData}"
                         sortedBy="{!v.sortBy}"
                         sortedDirection="{!v.sortDirection}"
                         onsort="{!c.handleSort}"/>
    
</aura:component>

controller

({
    onInit : function(component,event,helper){
        // Setting column information.To make a column sortable,set sortable as true on component load
        component.set("v.contactColumns",[
            { label : 'Name', fieldName : 'Name', type : 'Name', sortable : true },
            { label : 'Phone', fieldName : 'Phone', type : 'Phone', sortable : true },
            { label : 'Contact Level', fieldName : 'Contact_Level__c', type : 'Picklist', sortable : true },
            { label : 'Account', fieldName : 'Account', type : 'Lookup', sortable : true },
            { label : 'Owner', fieldName : 'OwnerId', type : 'lookup', sortable : true },
            { label : 'Created By', fieldName : 'CreatedById', type : 'Lookup(User)', sortable : true },
            { label : 'Created Date', fieldName : 'CreatedDate', type : 'Date/Time', sortable : true },
        ]);
        var action = component.get("c.fetchData");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.contactData", response.getReturnValue());
                component.set("v.filteredData", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
        // call helper function to fetch account data from apex
        helper.getAccountData(component);
    },
    
    //Method gets called by onsort action,
    handleSort : function(component,event,helper){
        //Returns the field which has to be sorted
        var sortBy = event.getParam("fieldName");
        //returns the direction of sorting like asc or desc
        var sortDirection = event.getParam("sortDirection");
        //Set the sortBy and SortDirection attributessadsad
        component.set("v.sortBy",sortBy);
        component.set("v.sortDirection",sortDirection);
        // call sortData helper function
        helper.sortData(component,sortBy,sortDirection);
    },
            
   	searchTable : function(cmp,event,helper) {
        var allRecords = cmp.get("v.contactData");
        var searchFilter = event.getSource().get("v.value").toUpperCase();
        
        var tempArray = [];
        var i;

        for(i=0; i < allRecords.length; i++){
            if((allRecords[i].Name && allRecords[i].Name.toUpperCase().indexOf(searchFilter) != -1))
            {
                tempArray.push(allRecords[i]);
            }
        }
        cmp.set("v.filteredData",tempArray);
    },
    
    // Function used to create a new Contact
    newContact: function(component, event, helper) {
        // Global event force:createRecord is used
        var createContact = $A.get("e.force:createRecord");
        // Parameters like apiName and defaultValues are set
        createContact.setParams({
            "entityApiName": "Contact",
            "defaultFieldValues": {
                "AccountId": component.get("v.recordId")
            }
        });
        // Event fired and new contact dialog open
        createContact.fire();
    },
})

({
    getAccountData : function(component){
        //Load the Account data from apex
        var action = component.get("c.getAccounts");
        var toastReference = $A.get("e.force:showToast");
        action.setCallback(this,function(response){
            var state = response.getState();
            if(state == "SUCCESS"){
                var accountWrapper = response.getReturnValue();
                if(accountWrapper.success){
                    //Setting data to be displayed in table
                    component.set("v.contactData",accountWrapper.contactList);
                    toastReference.setParams({
                        "type" : "Success",
                        "title" : "Success",
                        "message" : accountWrapper.message,
                        "mode" : "dismissible"
                    });
                } // handel server side erroes, display error msg from response 
                else{
                    toastReference.setParams({
                        "type" : "Error",
                        "title" : "Error",
                        "message" : accountWrapper.message,
                        "mode" : "sticky"
                    }); 
                }
            } // handel callback error 
            else{
                toastReference.setParams({
                    "type" : "Error",
                    "title" : "Error",
                    "message" : 'An error occurred during initialization '+state,
                    "mode" : "sticky"
                });
            }
            toastReference.fire();
        });
        $A.enqueueAction(action);
    },
    
    sortData : function(component,fieldName,sortDirection){
        var data = component.get("v.filteredData");
        //function to return the value stored in the field
        var key = function(a) { return a[fieldName]; }
        var reverse = sortDirection == 'asc' ? 1: -1;
        
        // to handel number/currency type fields 
        if(fieldName == 'NumberOfEmployees'){ 
            data.sort(function(a,b){
                var a = key(a) ? key(a) : '';
                 var b = key(b) ? key(b) : '';
                return reverse * ((a>b) - (b>a));
            }); 
        }
        else{// to handel text type fields 
            data.sort(function(a,b){ 
                var a = key(a) ? key(a).toLowerCase() : ''; //To handle null values , uppercase records during sorting
                var b = key(b) ? key(b).toLowerCase() : '';
                return reverse * ((a>b) - (b>a));
            });    
        }
        //set sorted data to accountData attribute
        component.set("v.filteredData",data);
    }
    
})

public class SortableAccountTableController {
   // wrapper class 
    public class AccountWrapper{
        @AuraEnabled
        public String message;
        @AuraEnabled
        public List<Contact> contactList;
        @AuraEnabled
        public Boolean success;
    }
    
    //Return account records and message to be displayed in toast
    @AuraEnabled
    public static AccountWrapper getAccounts(){
        AccountWrapper accountWrapper = new AccountWrapper();
        try{
            accountWrapper.contactList = [SELECT ID, Name, Phone, Contact_Level__c, AccountId, OwnerId, CreatedById, CreatedDate
                                           FROM Contact
                                           LIMIT 50];
            accountWrapper.message = 'Account records are retrieved ';
            accountWrapper.success = true;
        }
        catch(Exception e){
            accountWrapper.message = e.getMessage();
            accountWrapper.success = false;
        }
        return accountWrapper;
    }
    
	@AuraEnabled
    public static List<sObject> fetchData() {
        //Query and return list of Contacts
        List<SObject> objRecords = [SELECT Name from Contact LIMIT 20];
        return objRecords;
	}
}