Hello friends, today we are going to discuss LWC Datatable CSS Styling in Salesforce. We can apply custom CSS in LWC Datatable. In this way, we can change the Datatable header background color, and column colors and also can put the icons.
Also, check this: Most Common Salesforce Apex Operations Part -2
Key Highlights :
- Can be applied CSS on table headers.
- Change the column’s text color.
- Change the columns Background-color
Process & Code :
1. Create a CSS file link and upload it as a static resource with the name: lwcDatatableStyle.
Note : Unzip the above link file and upload the CSS file in salesforce.
2. Now we will create Apex class and LWC components to show the Opportunity Data in LWC Datatable with styling.
OpportunityDataController.cls :
public class OpportunityDataController {
@AuraEnabled (cacheable=true)
public static List<Opportunity> fetchOpportunity(){
return [SELECT Id, Name, Amount, StageName FROM Opportunity LIMIT 20];
}
}
lWCDatatableCSS.HTML :
<template>
<lightning-card title="Techdicer LWC Datatable CSS Styling" icon-name="standard:recipe">
<template if:true={data}>
<div class="tableCss">
<lightning-datatable
key-field="Id"
data={data}
columns={columns}
></lightning-datatable>
</div>
</template>
</lightning-card>
</template>
lWCDatatableCSS.JS :
import { LightningElement, wire, track } from 'lwc';
import fetchOpportunities from '@salesforce/apex/OpportunityDataController.fetchOpportunity';
import {loadStyle} from 'lightning/platformResourceLoader';
import lwcDatatableStyle from '@salesforce/resourceUrl/lwcDatatableStyle'
const COLUMNS = [
{label:'Opportunity Name', fieldName:'Name', cellAttributes:{
class:'datatable-CellColor'
}},
{label:'Stage Name', fieldName:'StageName', type:'text'},
{label:'Annual Revenue', fieldName:'Amount', type:'currency', cellAttributes:{
class:{fieldName:'amountColor'},
iconName:{fieldName:'iconName'}, iconPosition:'right'
}}
]
export default class LWCDatatableCSS extends LightningElement {
@track data;
@track error;
columns = COLUMNS;
isCssLoaded = false
@wire(fetchOpportunities)
wireData({data, error}){
if(data){
let dataCopy = JSON.parse(JSON.stringify(data));
dataCopy.forEach(currentItem => {
currentItem.amountColor = currentItem.Amount < 50000 ? "slds-text-color_error" : "slds-text-color_success";
currentItem.iconName = currentItem.Amount < 50000 ? "utility:down" : "utility:up"
});
this.data = dataCopy;
} else if(error){
this.data = undefined;
this.error = error;
}
}
renderedCallback(){
if(this.isCssLoaded){
return
}
this.isCssLoaded = true
loadStyle(this, lwcDatatableStyle).then(()=>{
console.log("Loaded Successfully")
}).catch(error=>{
console.log(error)
});
}
}
lWCDatatableCSS.js-meta.xml :
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output :
Reference :
What’s your Reaction?
+1
6
+1
2
+1
+1
+1
+1
3
Total views : 1095329
4 comments
Can I use custom classes insted of ‘slds’.
Yes you can
I tried the same way, but it’s not working for custom LWC table. Could you please add your comments how to achieve it for custom lwc data table.
Did you check console. also cheek CSS is loaded.