function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Pavushetti Abhilash 3Pavushetti Abhilash 3 

add colors to lwc datatable header

Hi Everyone.
I want to add colors to LWC standard Lightning datattable. Please let me know how to add. 
<div class="slds-m-top_small slds-m-bottom_xx-large" >
                        <c-custom-type-component
                            class="POdataTable" 
                            key-field="Id" 
                            data={POrecords}
                            columns={columns} 
                            onrowselection={selectedRecord}  
                            selected-rows={preSelectedRows}
                            onsave={handleReturnQuantity}
                            draft-values={saveDraftValues} 
                            onclick={removeInlinePopover}
                            oncancel={clearSelecteData}
                            min-column-width="120"
                            onrowaction={getPopUpInfo}
                            suppress-bottom-bar={supp}
                            onpicklistchanged={picklistChanged}
                        ></c-custom-type-component> 
                    </div>

-----JS----
{label:'PO#', fieldName:'PO_Number__c', type:'text',class : "POdataTable", innerWidth:120, cellAttributes: 
        { class: 'slds-text-color_success slds-text-title_caps slds-color__background_gray-5'}
    },-------- so on columns
-------CSS-----
.THIS {
}
.THIS .POdataTable thead th span { 
background-color: #2a5596; 
color: white;
}
CharuDuttCharuDutt
Hiii Pavvushetti
Try Below Code 
LWC

<template>
    <lightning-card title="Datatable styling in lwc">
        <template if:true={tableData}>
            <div class="myTable">
            <lightning-datatable
            key-field="Id"
            data={tableData}
            columns={columns}
            hide-checkbox-column
            ></lightning-datatable>
        </div>
        </template>
       
    </lightning-card>
</template>
###################################################################################################################
CSS

.myTable table>thead .slds-cell-fixed.slds-has-button-menu, .myTable table>thead .slds-cell-fixed.slds-has-button-menu:hover{
  background: pink;
}
Please Mark It As Best Answer If It Helps
Thank You!
Pavushetti Abhilash 3Pavushetti Abhilash 3
Hi Charu soni. Thanks for reply. But its not working. Here I want to clarify that my below table is not standard Lightning datatable. Its custom type component. May be is it works or not.
  <div class = "myTable">
                        <c-custom-type-component
                            class="POdataTable" 
                            key-field="Id" 
                            data={POrecords}
                            columns={columns} 
                            onrowselection={selectedRecord}  
                            selected-rows={preSelectedRows}
                            onsave={handleReturnQuantity}
                            draft-values={saveDraftValues} 
                            onclick={removeInlinePopover}
                            oncancel={clearSelecteData}
                            min-column-width="120"
                            onrowaction={getPopUpInfo}
                            suppress-bottom-bar={supp}
                            onpicklistchanged={picklistChanged}
                        ></c-custom-type-component>
                        </div> 
------CSS------
.myTable table>thead .slds-cell-fixed.slds-has-button-menu, .myTable table>thead .slds-cell-fixed.slds-has-button-menu:hover{
  background: rgb(228, 39, 71);
}
Suraj Tripathi 47Suraj Tripathi 47
Hi Pavushetti,

To add colors in lwc datatable you can create css file in your system and add it to lwc file by this way you can 
add css according to your requirement. Take the refference of below link -:

https://www.salesforcetroop.com/datatable_styling_in_lwc

If you find your Solution then mark this as the best answer.

Thank you!
Regards,
Suraj Tripathi  
Kalpesh ShringarpureKalpesh Shringarpure
Hi,
try using below code for backgroud color of heaeders in your CSS

:host {
    --lwc-tableColorBackgroundHeader : #820000;
}

Similarly use standard variables like "--sds-c-card-color-background" for lightning card.