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