function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
beingofhabitsbeingofhabits 

How to apply css to headers of a lightning:datatable?

I've tried this in two ways:
First:
component.set("v.columns",[
            {label:'', fieldName:'edit', type:'action', class: 'cols', cellAttributes: { iconName: { fieldName: 'utility:custom_apps' }}},
             ...
]);
Second:
<lightning:datatable data="{! v.data }"
		class="cols"
        columns="{! v.columns }"
        keyField="id"
		resizeColumnDisabled="true"
		hideCheckboxColumn="true"/>
	</lightning:card>

But neither of it works. Is it possible at all?
If needed, I here is my CSS as well
.THIS .cols {
    background-color: #16325c;
    color: white;
}

 
Best Answer chosen by beingofhabits
NagendraNagendra (Salesforce Developers) 
Hi,

This should not be super difficult give your datatable a class e.g. table-test then in a style section of a component add
.THIS .table-test thead th span { 
background-color: #16325c; 
color: white}
The result should be:
User-added imageBear in mind there are hover events that you also have to override.

Hope this helps.

Kindly mark this as solved if the reply was helpful.

Thanks,
Nagendra
 

All Answers

NagendraNagendra (Salesforce Developers) 
Hi,

This should not be super difficult give your datatable a class e.g. table-test then in a style section of a component add
.THIS .table-test thead th span { 
background-color: #16325c; 
color: white}
The result should be:
User-added imageBear in mind there are hover events that you also have to override.

Hope this helps.

Kindly mark this as solved if the reply was helpful.

Thanks,
Nagendra
 
This was selected as the best answer
Joshua LimJoshua Lim
Thanks Nagendra,

How would you disable the hover styling events?