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]

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]

colorPicklistTableController.js  [JavaScript Controller]

  • 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]

leadSourceColorController.js [Lightning Component]

  • See code comments.
From developer console >> file >> new >> Lightning Application
demo.app [Lightning 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  🙂

(Visited 2,019 times, 1 visits today)

2 comments

Leave a Reply