You need to sign in to do that
Don't have an account?
Pavushetti 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;
}
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;
}
Try Below Code Please Mark It As Best Answer If It Helps
Thank You!
<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);
}
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
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.