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 5,106 times, 1 visits today)

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

Leave a Reply