Skip to main content
Topics#Lightning ExperienceAbhilash Pavushetti の質問
Abhilash Pavushetti (Salesforce) が「#Lightning Experience」で質問
2021年9月18日 8:42

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;

}
4 件の回答
  1. Kalpesh Shringarpure (PWC)
    2023年6月1日 9:27
    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.
回答を記入...
0/9000