Create Lightning datatable with sorting of columns Salesforce

  <lightning:datatable 
        data="{!v.Caselist}"
        columns="{!v.mycolumns }"
        keyField="id" 
        hideCheckboxColumn="true"
        showRowNumberColumn="true"
        sortedBy="{!v.sortBy}"
        sortedDirection="{!v.sortDirection}"
        onsort="{!c.handleSort}"
   />

<aura:component implements="flexipage:availableForAllPageTypes"
                access="global"
                controller="ControllerForCaseList">
	
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    
    
    <aura:attribute name="Caselist" type="Case[]"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="sortBy" type="String"/>
    <aura:attribute name="sortDirection" type="String"/>
           
    
       
  <lightning:datatable data="{!v.Caselist}"
        columns="{!v.mycolumns }"
        keyField="id" 
        hideCheckboxColumn="true"
        showRowNumberColumn="true"
        sortedBy="{!v.sortBy}"
        sortedDirection="{!v.sortDirection}"
        onsort="{!c.handleSort}"/>
    
</aura:component>

({
    doInit : function(component, event, helper) {
      
        component.set('v.mycolumns', [
            
            {label: 'Case Number', fieldName: 'linkname', type: 'url', sortable :true,       typeAttributes: {label: { fieldName: 'CaseNumber' }, targe: '_blank'}},
            {label: 'Status', fieldName: 'Status', type: 'text', sortable :true},
            {label: 'Created Date ', fieldName: 'CreatedDate', type: 'date', sortable :true}
        ]);

        
        //this method loads data at the time of first loading  only     
        var action = component.get("c.getCases");
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var Caselist = response.getReturnValue();
                if(Caselist.length > 0){
                    
                    
                    // set Caselist attribute with response
                    component.set("v.Caselist",Caselist);
                                    
                }     
            } 
            else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);
        
    },
    
   
    //Method gets called by onsort action,
    handleSort: function(component,event,helper){
        var sortBy = event.getParam("fieldName");
  
        var sortDirection = event.getParam("sortDirection");
  
        component.set("v.sortBy",sortBy);
        component.set("v.sortDirection",sortDirection);
        
        helper.sortData(component,sortBy,sortDirection);
    }
})

({
	sortData : function(component,fieldName,sortDirection){
        var data = component.get("v.Caselist");
        //function to return the value stored in the field
        var key = function(a) { return a[fieldName]; }
        var reverse = sortDirection == 'asc' ? 1: -1;
        
        data.sort(function(a,b){
                var a = key(a) ? key(a) : '';
                var b = key(b) ? key(b) : '';
                return reverse * ((a>b) - (b>a));
            });
        component.set("v.Caselist",data);
    }
})

public class ControllerForCaseList {
	@AuraEnabled
    public static List<WrapperCase> getCases(){
        List<WrapperCase> wCase = new List<WrapperCase>();
        for(Case cs : [SELECT Id, Status, CreatedDate, CaseNumber FROM Case LIMIT 15]){
            wCase.add(new WrapperCase(cs));
        }
        return wCase;
    }
    
    //wrapper class
    public class WrapperCase{
        @AuraEnabled
        public String CaseNumber;
        @AuraEnabled
        public String Id;
        @AuraEnabled
        public String linkname;
        @AuraEnabled
        public Datetime CreatedDate;
        
        public WrapperCase(Case cs){
            this.CaseNumber = cs.CaseNumber;
            this.Id = cs.Id;
            this.CreatedDate = cs.CreatedDate;
            this.linkname = 'lightning/r/Case/' + cs.Id +'/view';
        }
    }
}