LWC Datatable CSS Styling

by Rijwan Mohmmed
0 comment
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

You may also like

Leave a Comment