Conditionally Add Icon And Style On Records In Salesforce Lightning DataTable Component
Scenario – When an account record is marked as important(the custom field checkbox VIP_Account__c is enabled) in the account record detail page, an slds-icon “check” appears in the lightning datatable and the record will be highlighted in red color.
When an account record is marked as not important(the custom field checkbox VIP_Account__c is disabled) in the account record detail page, an slds-icon “close” appears in the lightning datatable and the record will be highlighted in black color.
Prerequisites- Create a custom field in account of type checkbox and give the name – VIP_Account__c.
From developer console >> file >> new >> apex class
Apex Controller : AccountDataTable.apxc
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* Source : sfdcMonkey.com Date : 3/13/2019 API : 45.00 */ public class AccountDataTable { /*apex method to fetch account list*/ @AuraEnabled public static List <Account> getAccounts() { List<Account> accountList = new List<Account>(); for(Account Acc : [SELECT Name, Industry, Type, VIP_Account__c FROM Account ORDER BY LastModifiedDate DESC LIMIT 20]){ accountList.add(Acc); } return accountList; } } |
From developer console >> file >> new >> Lightning Component
Lightning Component : datatableWithIcon.cmp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- Source : sfdcMonkey.com API : 45.00 Date : 3/13/2019 --> <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="AccountDataTable" > <aura:handler name="init" value="{!this}" action="{!c.fetchAccountDetails}"/> <aura:attribute type="account[]" name="accountList"/> <aura:attribute name="tableCol" type="List"/> <lightning:datatable data="{! v.accountList }" columns="{! v.tableCol }" keyField="id" hideCheckboxColumn="true"/> </aura:component> |
JavaScript Controller : datatableWithIconController.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
/* Source : sfdcMonkey.com API : 45.00 Date : 3/13/2019 */ ({ fetchAccountDetails : function(component, event, helper) { // set table columns in variable var tableColumns = [ { "label": "Important Account", "fieldName": "VIP_Account__c", "cellAttributes": { "class": { "fieldName": "showClass" }, "iconName": { "fieldName": "displayIconName" } } }, { "label": "Account Name", "fieldName": "linkName", "type": "url", "typeAttributes": { "label": { "fieldName": "Name" }, "target": "_blank" }, "cellAttributes": { "class": { "fieldName": "showClass" } } }, { "label": "Industry", "fieldName": "Industry", "type": "picklist", "cellAttributes": { "class": { "fieldName": "showClass" } } }, { "label": "Account Type", "fieldName": "Type", "type": "picklist", "cellAttributes": { "class": { "fieldName": "showClass" } } } ]; // set tableCol attribute with table columns component.set('v.tableCol', tableColumns); // call server side apex method to fetch account records var action = component.get("c.getAccounts"); action.setCallback(this, function(response){ var state = response.getState(); if (state === "SUCCESS") { // store the account list in records variable var records = response.getReturnValue(); // iterate each records with forEach loop records.forEach(function(record){ if(typeof record.Id != 'undefined'){ // based on VIP Account field value set the icon and style class to each record // https://www.lightningdesignsystem.com/icons/#utility if(record.VIP_Account__c){ record.showClass = (record.VIP_Account__c === true ? 'redcolor' : 'blackcolor'); record.displayIconName = 'utility:check'; } else{ record.showClass = (record.VIP_Account__c === false ? 'blackcolor' : 'redcolor'); record.displayIconName = 'utility:close'; } // set the record link with record id record.linkName = '/'+record.Id; } }); // after the loop set the updated account records on "accountList" aura attribute component.set("v.accountList", records); } }); $A.enqueueAction(action); } }) |
- Check code comments.
3 Ways to Use CSS In Lightning Component.
CSS : datatableWithIcon.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.THIS .redcolor svg{ fill : red; } .THIS .redcolor, .THIS .redcolor a{ color: red ; } .THIS .redcolor svg{ fill: red !important; } .THIS .blackcolor svg{ fill : black; } .THIS .blackcolor{ color : black ; } .THIS .blackcolor a{ color : black ; } .THIS .blackcolor svg{ color : black !important; } |
TestApp :
From developer console >> file >> new >> Lightning Application
|
1 2 3 4 5 6 7 8 |
<aura:application extends="force:slds"> <c:datatableWithIcon/> <!-- here c: is org. default namespace prefix--></span> </aura:application> |
check code comments.
Output :
Related Resources :
Other popular Post :
- Custom Data Table With Inline Editing In Salesforce Lightning Component – Sample
- Powerful Lightning Datatable base component – Example Using Fieldset
- Custom Data Table With Inline Editing In Salesforce Lightning Component – Sample
- How To Use jQuery DataTable Plugin In Salesforce Lightning Component -: Sample
- How To Implement Infinity Or Lazy Loading In Salesforce Lightning DataTable
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.
Happy Learning 
About The contributor:
Working with Infosys from last 3 years. Mentored 500+ people in Salesforce. Volunteer for the Hyderabad Trailblazin 2018 and anchored for three events.
Active volunteer/member for the Hyderabad SFDC developer group for the last 1 and half year.
My Hobbies- Exploring different places, A great foodie, Reading Books.
My Favorite Quote- Arise awake and stop not till the goal is reached.
Post By Shovan :
(Visited 14 times, 1 visits today)
(Visited 12,485 times, 1 visits today)
8 comments
Styling inside init method is working perfectly but I have a scenario where account data is provided by another component in attribute. Data gets updated in the data table but styling does not apply since component is not rendered and init method is not invoked. Any idea how styling code can be re-run whenever account data inside attribute is changing.
do IT IN lwc
I want tooltip like yes and No on utility:check and utility:close is it possible?
hi,
i did the same code on contacts and changed all the fields accordingly.
but i cannot see the output.
Should i drag the component on the page or something?
so how does this work
after saving all the code, sho
Hi,
Can anyone explain why are we specifying svg, a in the styleclass for blackcolor class?
THIS .blackcolor svg{
fill : black;
}
.THIS .blackcolor{
color : black ;
}
.THIS .blackcolor a{
color : black ;
}
.THIS .blackcolor svg{
color : black !important;
}
How do i highlight only one particular cell ?
Hi,
Is it possible add severals icons in the same column? 2 icons at the same time for example?
Thanks so much,
A greeting
Can you please show the same example in LWC. I am facing some issue in LWC. Please help me out.