add icon and style LC

Conditionally Add Icon And Style On Records In Salesforce Lightning DataTable Component

Lightning 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.

 

lightning datatable with icon

From developer console >> file >> new >> apex class

Apex Controller : AccountDataTable.apxc

From developer console >> file >> new >> Lightning Component 

Lightning Component : datatableWithIcon.cmp

JavaScript Controller : datatableWithIconController.js

  • Check code comments.

3 Ways to Use CSS In Lightning Component.

CSS : datatableWithIcon.css

TestApp :

From developer console >> file >> new >> Lightning Application

check code comments.

Output :

add icon to lightning datatable salesforce

Related Resources :

Other popular Post :

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: 

Shovan Mandal

1 Post Contribute
shovan sfdcMonkey
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 1 times, 1 visits today)
(Visited 180 times, 1 visits today)

Leave a Reply