datatableDemo
and add the following code to the respective files.<template>
<lightning-card title="Datatable styling in lwc">
<template if:true={tableData}>
<div class="myTable">
<lightning-datatable
key-field="Id"
data={tableData}
columns={columns}
hide-checkbox-column
></lightning-datatable>
</div>
</template>
</lightning-card>
</template>
import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/tableController.getAccounts'
import {loadStyle} from 'lightning/platformResourceLoader'
import COLORS from '@salesforce/resourceUrl/colors'
const COLUMNS = [
{label:'Account Name', fieldName:'Name', cellAttributes:{
class:{fieldName:'accountColor'}
}},
{label:'Annual Revenue', fieldName:'AnnualRevenue', type:'currency', cellAttributes:{
class:{fieldName:'amountColor'},
iconName:{fieldName:'iconName'}, iconPosition:'right'
}},
{label:'Industry', fieldName:'Industry', type:'text', cellAttributes:{
class:{fieldName:'industryColor'}
}},
{label:'Phone', fieldName:'Phone', type:'phone'},
]
export default class DatatableDemo extends LightningElement {
tableData
columns = COLUMNS
isCssLoaded = false
@wire(getAccounts)
accountsHandler({data, error}){
if(data){
this.tableData = data.map(item=>{
let amountColor = item.AnnualRevenue <500000 ? "slds-text-color_error":"slds-text-color_success"
let iconName = item.AnnualRevenue <500000 ? "utility:down":"utility:up"
return {...item,
"amountColor":amountColor,
"iconName":iconName,
"industryColor":"slds-icon-custom-custom12 slds-text-color_default",
"accountColor":"datatable-orange"
}
})
console.log(this.tableData)
}
if(error){
console.error(error)
}
}
renderedCallback(){
if(this.isCssLoaded) return
this.isCssLoaded = true
loadStyle(this, COLORS).then(()=>{
console.log("Loaded Successfully")
}).catch(error=>{
console.error("Error in loading the colors")
})
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>50.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
tableController.cls
and add the following code to the file.public with sharing class tableController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts() {
return [SELECT Id, Name, AnnualRevenue, Industry, Phone from Account];
}
}
colors.css
and add the following code..datatable-orange{
color:#fff;
background-color:#e06000;
}
.datatable-orange:hover{
color:#000;
background-color:#e06000;
}
.myTable table>thead .slds-cell-fixed.slds-has-button-menu, .myTable table>thead .slds-cell-fixed.slds-has-button-menu:hover{
background: antiquewhite;
}
Now place your component to the record page. You will see the following output