Please follow below code : I have applied some custom css to below Lightning Data Table to change the Background Color, Text Color and Hover Color.
Note : You have to override default hover CSS.
Component.cmp
1 2 3 4 5 | <lightning:datatable keyField="id" data="{! v.recordList}" class="myCss" columns="{! v.columns}" hideCheckboxColumn="true" /> |
Style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .THIS { } .THIS .myCss thead th span{ background-color: #3258a8; color: white; } .THIS .myCss td { background-color: #fffbdb; color: black; } .THIS .myCss tr { background-color: #fffbdb; color: black; } .THIS .myCss td:hover { background-color: #ffed63 !important; color: black !important; font-weight:bold !important; } |
Please check below links also and subscribe if you like the content :
- Reassign Leads using Lead Assignment Rule on Update/Upsert.
- Multipurpose VF #Component to Add multiple records on a Button's Click.
- Custom Aura Feed Component forceChatter:feed.
- How to Compare Change Sets from another org ?
- How to secure your web to lead forms ?
- Lemonade Stand Application in Salesforce.
- How to send WhatsApp from Salesforce Lightning Component ?
- Use ZAPIER with Salesforce.
- Create Surveys in Salesforce.
- Line Clamp in Lightning Component.
- How to get Parent Id from encoded URL in Lightning Component ?
- How to add sorting in Lightning Data Table ?
- How to Send SMS from Salesforce ?
- How to Add Star Ratings in Salesforce ?
If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !
Thanks
Keep Coding
0 Comments