LWC Datatable CSS Styling

by Rijwan Mohmmed
4 comments
lwc-datatable-css-styling-techdicer

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

lwc-datatable-css-styling-output-techdicer

Key Highlights :

  1. Can be applied CSS on table headers.
  2. Change the column’s text color.
  3. 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 :

lwc-datatable-css-styling-Output-techdicer
lwc-datatable-CSS-style-Output-techdicer

Reference :

  1. LWC Datatable
What’s your Reaction?
+1
5
+1
2
+1
0
+1
0
+1
0
+1
3

You may also like

4 comments

MD HABIBULLA February 23, 2023 - 12:08 pm

Can I use custom classes insted of ‘slds’.

Reply
Rijwan Mohmmed February 23, 2023 - 3:21 pm

Yes you can

Reply
Mahesh July 14, 2023 - 8:07 am

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.

Reply
Rijwan Mohmmed July 14, 2023 - 5:27 pm

Did you check console. also cheek CSS is loaded.

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.