Change Background Color in Lightning Data Table Salesforce

Kapil June 11, 2020

In this Article you will learn how you can apply some custom CSS in Lightning Data Table and change the Background and Text Colors.

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;
}


Check other posts as well !


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 


Tags:

Post a Comment

4 Comments

  1. SiddhOctober 2, 2021 at 3:22 PM

    how to set row color when a particular row is selected in LWC datatable?

    ReplyDelete
    Replies
    1. KapilOctober 2, 2021 at 11:54 PM

      Try to get the dom elements using the row index and then you may use another class or inline css for the same.

      Delete
  2. sattuApril 3, 2022 at 5:41 AM

    this is not working in my case. I have an simple datatable in lwc and i only want to change color of header row. any suggestions why its not working.

    ReplyDelete
    Replies
    1. KapilApril 4, 2022 at 4:36 AM

      I would suggest you to do inspect element and check the css class name of the header row. Than override it using external css.

      Delete