January 8, 2019

Lighting Data Table Sorting while we are using hyper link with Label

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:



No comments:

Post a Comment