Custom css for header in LWC datatatable

Question

We have requirement is like. in Vlocity Omniscript designer we have added LWC component. In LWC we have only Lighting Datatable. And in this datatable we need to change the Table Header for font Color and back ground color. I have tried almost everythings but its not working. basic one was

.THIS.table-test > table> tr th {

    background-color: #fafaf9 !important;
    color: #00b0ea !important;    
} also not working. 

in HTML code is basic

 <lightning-datatable 
        class="table-test"
        key-field="id"
        data={data}
        columns={columns}
        max-row-selection="1"
        onrowselection={HanldeEvent}>
</lightning-datatable>

even I have tried with cellattributes also Can anyone please help me on this.

thanks in advance

Answer 1

You can try the following code snippet. It's using the renderedCallback method to add a style tag that will update the styling of the standard component. This is a workaround and you may need to use it carefully as it may affect the styling of all the components.

renderedCallback() {
    console.log(this.isRendered);
    if (this.isRendered) {
        return; 
    }
    this.isRendered = true;

    let style = document.createElement('style');
    style.innerText = '.slds-th__action{background-color: #f10000; color: #ffff11;}';
    this.template.querySelector('lightning-datatable').appendChild(style);
}