<aura:component controller="Account_sorting">
    <aura:attribute name="recordId" type="Account" />
    <aura:attribute name="sort" type="boolean" default="false"/>
    <aura:attribute name="account" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
     
    
    <!-- Use the Apex model and controller to fetch server side data -->
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer">
        
        <thead>          
            <tr class="slds-text-heading--small"> 
                <!-- Use the Onclick for call function -->
               <th scope="col" onclick="{!c.sortid}" Name="ID"><span class="slds-truncate">Account Id</span></th>
                <th scope="col" onclick="{!c.sortname}" Name="Name"><span class="slds-truncate">Account Name</span></th>
                <th scope="col" ><span class="slds-truncate">Industry</span></th>
                <th scope="col" onclick="{!c.sortphone}" Name="Phone"><span class="slds-truncate">Phone</span></th>
                <th scope="col" ><span class="slds-truncate">Website</span></th>

                
            </tr>
            
        </thead>
        
        
        <tbody>
            <aura:iteration items="{!v.account}" var="account">
                <tr>
                    <th scope="row">{!account.Id}</th>
                    <td >{!account.Name}</td>                      
                    <td>{!account.Industry}</td>                
                    <td>{!account.Phone}</td>
                    <td>{!account.Website}</td>                     
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
</aura:component>

({
    doInit : function(component, event, helper) {
        helper.getAccount(component);
    },
     sortid : function(component, event, helper) {
        helper.getsortedid(component, event);
    }
    ,
     sortname : function(component, event, helper) {
        helper.getsortedname(component, event);
    }
    ,
     sortphone : function(component, event, helper) {
        helper.getsortedphone(component, event);
    }
})

({
    getAccount : function(component) {
        var action = component.get("c.getAccount");
        
        //Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.account", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    },
    getsortedid : function(component, event) {
        var action = component.get("c.getsorted");
        if(component.get("v.sort") == false)
        {
            action.setParams({ str : 'ID',order:'ASC' }); 
            component.set("v.sort",true);
        }
        else
        {
            action.setParams({ str : 'ID',order:'DESC' }); 
            component.set("v.sort",false);
        }
       
        
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.account", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    },
        getsortedname : function(component, event) {
        var action = component.get("c.getsorted");
         if(component.get("v.sort") == false)
        {
            action.setParams({ str : 'Name',order:'ASC' }); 
            component.set("v.sort",true);
        }
        else
        {
            action.setParams({ str : 'Name',order:'DESC' }); 
            component.set("v.sort",false);
        }
        
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.account", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    },
        getsortedphone : function(component, event) {
        var action = component.get("c.getsorted");
         if(component.get("v.sort") == false)
        {
            action.setParams({ str : 'Phone',order:'ASC' }); 
            component.set("v.sort",true);
        }
        else
        {
            action.setParams({ str : 'phone',order:'DESC' }); 
            component.set("v.sort",false);
        }
        
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.account", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    }
   
})

public class Account_sorting {
	@AuraEnabled
    public list<Account> accountlist {get;set;}
    @AuraEnabled
   public static List<Account> getAccount() {
      list<Account> accountlist = [SELECT Id, Name, BillingState,Website, Phone, Industry from Account LIMIT 10];
       return accountlist;
   }
     @AuraEnabled
   public static List<Account> getsorted(String str,String order) {
       String query='SELECT Id, Name, BillingState,Website, Phone, Industry from Account ORDER BY '+str+' '+order+' NULLS LAST LIMIT 20 ';
      list<Account> accountlist = database.query(query);
       return accountlist;
   }
}