How to Display Colorful Values Based on Picklist Value in Lightning Component Data Table

Lightning Component

Hi friends, Some times we need to display colorful or different style values in data table based on Pick list value or any other particular value. but when we have working with ‘aura:iteration’ it will be little bit puzzled for us.

So today in this post we will create a basic data table. and display contact object records using ‘aura:iteration’ tag.

In this lightning component we have a data table with First Name, Last Name, Department and lead Source standard fields.

For the lead source we will display colorful background  based on picklist values. For example: 

We have use: Orange for “Web”,  Pink for “Trade show”, LightGreen for “Purchases List”…and so on.

Prerequisites : Basic Understanding of Lightning Component Development.

How to Display Colorful Values Based on Picklist Value in Lightning Component Data Table
Lightning Component Output
Step 1 : Create Apex class Controller
colorPicklistController.apxs [apex class]
public class colorPicklistController{
@AuraEnabled
   public static list <contact> fetchContact(){
        
         List <contact> returnConList = new List < contact > ();
 
         for (contact c: [SELECT firstName, LastName, Department,LeadSource from contact Limit 50]) {
            returnConList.add(c);
          }
         return returnConList;
      
   }
}
In this Sample Post we have create 2 Lightning Component, one is for display table, and another for display contact lead Source picklist value in table column. BluePrint :
How to Display Colorful Values Based on Picklist Value in Lightning Component Data Table
Step 2 : Create DataTable [Parent] Lightning Component
colorPicklistTable.cmp [Lightning Component]
<aura:component controller="colorPicklistController">
  <!--aura init handler , call js "loadContactList" function on component load, and display contact data on table-->   
  <aura:handler name="init" value="{!this}" action="{!c.loadContactList}"/>
  
    <!--Declare Attributes-->  
  <aura:attribute name="ListOfContact" type="contact[]"/>
    
  <div class="slds-p-around--large">
  <!--https://www.lightningdesignsystem.com/components/data-tables/-->
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
      <thead>
        <tr class="slds-text-title--caps">
          <th scope="col">
            <div class="slds-truncate" title="First Name">First Name</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="First Name">Last Name</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Department">Department</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="First Name">Lead Source</div>
          </th>
        </tr>
      </thead>
      <!--table body start, 
        Iterate contact list as a <tr>
        -->
      <tbody>
        <aura:iteration items="{!v.ListOfContact}" var="con">
          <tr>
            <th scope="row">
              <div class="slds-truncate" title="{!con.FirstName}">{!con.FirstName}</div>
            </th>
            <th scope="row">
              <div class="slds-truncate" title="{!con.LastName}">{!con.LastName}</div>
            </th>
            <th scope="row">
              <div class="slds-truncate" title="{!con.Department}">{!con.Department}</div>
            </th>
            <th scope="row">
               <!--Add Child [colorLeadSource.cmp] component and pass the leadSource attribute value-->
              <c:colorLeadSource leadSource="{!con.LeadSource}"/>
            </th>
          </tr>
        </aura:iteration>
      </tbody>
    </table>
  </div>
</aura:component>
colorPicklistTableController.js  [JavaScript Controller]
({
    loadContactList: function(component, event, helper) {

      //call apex class method
      var action = component.get('c.fetchContact');

      action.setCallback(this, function(response) {
        //store state of response
        var state = response.getState();
        if (state === "SUCCESS") {
          //set response value in ListOfContact attribute on component.
          component.set('v.ListOfContact', response.getReturnValue());
        }
      });
      $A.enqueueAction(action);
    },
})
  • See code comments.
Before save this above component you have need to create child component first [Step 3].
Step 3 : Create Lead Source  [Child] Lightning Component
leadSourceColor.cmp [Lightning Component]
<aura:component >
  <!--call onLoad js function on every time component load-->
  <aura:handler name="init" value="{!this}" action="{!c.onLoad}"/>
  
  <aura:attribute name="Color" type="String"/>
  <aura:attribute name="leadSource" type="String"/>
  
  <div class="slds-truncate"  title="{!v.leadSource}">
    <span class="slds-badge" style="{! 'background-color: ' + v.Color}"> {!v.leadSource}</span>
  </div>
</aura:component>
leadSourceColorController.js [Lightning Component]
({
  onLoad: function(component, event, helper) {
    console.log('colorCmp load');
    var sName = component.get("v.leadSource");

    if (sName != undefined) {

      // **** write picklist values in Lower Case ***** //       
      var tempLowerCase = sName.toLowerCase();
      var cOrange = 'web';
      var cYellow = 'public relations';
      var cPink = 'trade show';
      var cLightGreen = 'purchased list';
      // ...add more values vaiable here 

      // set the color on based on picklist values      
      if (cOrange.indexOf(tempLowerCase) != -1) {
        component.set("v.Color", 'orange');
      } else if (cYellow.indexOf(tempLowerCase) != -1) {
        component.set("v.Color", 'Yellow');
      } else if (cPink.indexOf(tempLowerCase) != -1) {
        component.set("v.Color", 'pink');
      } else if (cLightGreen.indexOf(tempLowerCase) != -1) {
        component.set("v.Color", 'LightGreen');
      }
    }
  },
})
  • See code comments.
From developer console >> file >> new >> Lightning Application
demo.app [Lightning Application]
<aura:application extends="force:slds">
    <c:colorPicklistTable/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output-:

How to Display Colorful Values Based on Picklist Value in Lightning Component Data Table

Some Useful Resources : 

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  🙂

3 comments

Leave a Reply