<aura:component controller="ContactController" implements="flexipage:availableForAllPageTypes" access="global" >

    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="fname" type="string"/>
    <aura:attribute name="lname" type="string"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    <div>
        <lightning:input value="{!v.fname}"/>
        <lightning:input value="{!v.lname}"/>
        <lightning:button label="Search" onclick="{!c.doSearch}"/>
    </div>
    <lightning:datatable data="{! v.mydata }" 
                         columns="{! v.mycolumns }" 
                         keyField="id"
                         hideCheckboxColumn="true"
                         
                         />
</aura:component>

({
   doInit: function (cmp, event, helper) {
        cmp.set('v.mycolumns', [
                {label: 'Contact Name', fieldName: 'Name', type: 'text'},
                {label: 'Phone', fieldName: 'Phone', type: 'phone'},
                {label: 'Email', fieldName: 'Email', type: 'email'}
            ]);
       var actionFilter = {"fname":cmp.get("v.fname"),"lname":cmp.get("v.lname")};
        helper.getData(cmp, actionFilter);
    },
    doSearch:function(cmp, event, helper){
        var actionFilter = {"fname":cmp.get("v.fname"),"lname":cmp.get("v.lname")};
        helper.getData(cmp, actionFilter);
    },
     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);
    }
})

({
    getData : function(cmp, actionFilter) {
        var action = cmp.get('c.getContacts');
        action.setParams(actionFilter)
        action.setCallback(this, $A.getCallback(function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set('v.mydata', response.getReturnValue());
            } else if (state === "ERROR") {
                var errors = response.getError();
                console.error(errors);
            }
        }));
        $A.enqueueAction(action);
    },
    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));
        }
    }
})

public with sharing class ContactController {
    @AuraEnabled
    public static List<Contact> getContacts(string fname, string lname) {
        if(fname==null)
            fname='';
        if(lname==null)
            lname='';
        
        string firstname = '%'+fname+'%';
        string lastname = '%'+lname+'%';
        
        
        List<Contact> contacts = [SELECT Id, Name, Phone, Email FROM Contact where FirstName like :firstname and LastName like :lastname];
        system.debug(contacts);        
        return contacts;
    } 
}