Sample Code:


Component:

1. <aura:component implements=“force:appHostable”  
2.        controller=“AccountListController”>  
3.                   
4.     <aura:attribute type = “Account[]” name = “acctList”/>  
5.     <aura:attribute name = “mycolumns” type = “List”/>  
6.     <aura:attribute name = “sortedBy” type = “String” default = “Name”/>  
7.     <aura:attribute name = “sortedDirection” type = “String” default = “asc”/>  
8.       
9.     <aura:handler name = “init” value =“{! this }” action = “{! c.fetchAccounts }”/>  
10.       
11.     <lightning:datatable data = “{! v.acctList }”   
12.                          columns = “{! v.mycolumns }”   
13.                          keyField = “id”  
14.                          hideCheckboxColumn = “true”  
15.                          onsort = “{! c.updateColumnSorting }”  
16.                          sortedBy = “{! v.sortedBy }”    
17.                          sortedDirection = “{! v.sortedDirection }”/>  
18.       
19. </aura:component>  

Component Controller:

1. ({  
2.       
3.     fetchAccounts : function( component, event, helper ) {  
4.           
5.         component.set( ‘v.mycolumns’, [  
6.             {label: ‘Account Name’, fieldName: ‘linkName’, type: ‘url’, sortable: true,   
7.             typeAttributes: {label: { fieldName: ‘Name’ }, target: ‘_blank’}},  
8.             {label: ‘Industry’, fieldName: ‘Industry’, type: ‘text’, sortable: true},  
9.             {label: ‘Type’, fieldName: ‘Type’, type: ‘Text’}  
10.         ] );  
11.         var action = component.get( “c.fetchAccts” );  
12.         action.setParams({  
13.         });  
14.         action.setCallback(this, function( response ){  
15.             var state = response.getState();  
16.             if ( state === “SUCCESS” ) {  
17.                 var records =response.getReturnValue();  
18.                 records.forEach( function( record ){  
19.                     record.linkName = ‘/’ + record.Id;  
20.                 });  
21.                 component.set( “v.acctList”, records );  
22.                 helper.sortData( component, component.get( “v.sortedBy” ), component.set( “v.sortedDirection” ) );  
23.             }  
24.         });  
25.         $A.enqueueAction(action);  
26.           
27.     },  
28.       
29.     updateColumnSorting: function (cmp, event, helper) {  
30.           
31.         var fieldName = event.getParam( ‘fieldName’ );  
32.         cmp.set( “v.sortedBy”, fieldName );  
33.         if ( fieldName === ‘linkName’ )  
34.             fieldName = ‘Name’;  
35.         var sortDirection = event.getParam( ‘sortDirection’ );  
36.         cmp.set( “v.sortedDirection”, sortDirection );  
37.         helper.sortData( cmp, fieldName, sortDirection );  
38.           
39.     }  
40.   
41. })  

Component Helper:

1. ({  
2.       
3.     sortData: function ( cmp, fieldName, sortDirection ) {  
4.           
5.         var data = cmp.get( “v.acctList” );  
6.         var reverse = sortDirection !== ‘asc’;  
7.         data.sort( this.sortBy( fieldName, reverse ) )  
8.         cmp.set( “v.acctList”, data );  
9.           
10.     },  
11.       
12.     sortBy: function ( field, reverse, primer ) {  
13.           
14.         var key = primer ?  
15.             function( x ) { return primer( x[ field ] ) } :  
16.             function( x ) { return x[ field ] };  
17.         reverse = !reverse ? 1 : -1;  
18.         return function ( a, b ) {  
19.               
20.             return a = key( a ), b = key( b ), reverse * ( ( a > b ) – ( b > a ) );  
21.               
22.         }  
23.           
24.     }  
25.       
26. })  

Apex Class:

1. public class AccountListController {    
2.         
3.     @AuraEnabled    
4.     public static List < Account > fetchAccts() {    
5.             
6.         return [ SELECT Id, Name, Industry, Type, CreatedDate  
7.                    FROM Account   
8.                   LIMIT 100 ];    
9.             
10.     }      
11.         
12. }  

Output: