How to show different colors for buttons in lighting datatable in Salesforce?

Sample Code:

Component:


  1. <aura:component implements = "force:appHostable"    
  2.                 controller = "AccountListController">    
  3.         
  4.     <aura:attribute type = "object[]" name = "acctList"/>    
  5.     <aura:attribute name = "mycolumns" type = "List"/>    
  6.         
  7.     <aura:handler name = "init" value="{!this}" action="{!c.onInit}"/>    
  8.         
  9.     <lightning:datatable aura:id = "acctTable"  
  10.                          data = "{! v.acctList }"     
  11.                          columns = "{! v.mycolumns }"     
  12.                          keyField = "Id"    
  13.                          hideCheckboxColumn = "true"  
  14.                          onrowaction = "{! c.viewRecord }"/>    
  15.         
  16. </aura:component>  

Controller:

  1. ({    
  2.       
  3.     onInit : function( component, event, helper ) {    
  4.           
  5.         component.set( 'v.mycolumns', [    
  6.             {label: 'Account Name', fieldName: 'Name', type: 'text', editable:'true'},    
  7.             {label: 'Industry', fieldName: 'Industry', type: 'text'},                  
  8.             {label: 'Type', fieldName: 'Type', type: 'Text'},  
  9.             {type: "button", typeAttributes: {  
  10.                 label: 'View',  
  11.                 name: 'View',  
  12.                 title: 'View',  
  13.                 disabled: false,  
  14.                 value: 'view',  
  15.                 iconPosition: 'left',  
  16.                 variant: { fieldName: 'buttonColor'}  
  17.             }}   
  18.         ]);    
  19.         helper.fetchAccounts( component );  
  20.           
  21.     },  
  22.       
  23.     viewRecord : function( component, event, helper ) {  
  24.           
  25.         var recId = event.getParam( 'row' ).Id;  
  26.         var actionName = event.getParam( 'action' ).name;  
  27.         var viewRecordEvent = $A.get( "e.force:navigateToURL" );  
  28.         viewRecordEvent.setParams({  
  29.             "url""/" + recId  
  30.         });  
  31.         viewRecordEvent.fire();  
  32.           
  33.     }  
  34.       
  35. })  

Helper:

  1. ({  
  2.       
  3.     fetchAccounts : function( component ) {  
  4.           
  5.         var action = component.get( "c.fetchAccts" );  
  6.         action.setCallback(this, function( response ) {    
  7.               
  8.             var state = response.getState();   
  9.             if ( state === "SUCCESS" )   {  
  10.                   
  11.                 var records = response.getReturnValue();  
  12.                 for ( var i = 0; i < records.length; i++ ) {  
  13.                       
  14.                     if ( records[ i ].Industry === "Energy" )  
  15.                         records[ i ].buttonColor = 'white';  
  16.                     else if ( records[ i ].Industry === "Electronics" )  
  17.                         records[ i ].buttonColor = 'brand';  
  18.                     else if ( records[ i ].Industry === "Biotechnology" )  
  19.                         records[ i ].buttonColor = 'destructive';  
  20.                     else if ( records[ i ].Industry === "Construction" )  
  21.                         records[ i ].buttonColor = 'success';  
  22.                     else   
  23.                         records[ i ].buttonColor = 'neutral';  
  24.                       
  25.                 }  
  26.                 component.set( "v.acctList", records );     
  27.                   
  28.             }  
  29.               
  30.         });    
  31.         $A.enqueueAction(action);   
  32.           
  33.     }  
  34.       
  35. })  

Apex Class:

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

Output:


No comments:

Post a Comment