3

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

1 Answer 1

4

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);
}
2
  • Hi Naval Sharma, Thanks for your answer its working. is it possible to customize more lighting control from here like buttons also. Commented Apr 28, 2020 at 13:44
  • Yes, that is possible. You can upvote the answer if it's working for you. Commented May 1, 2020 at 4:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .