I have trouble adding a background color to one of the columns of this lwc datatable. I got this idea from the blog – https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/
HTML:
<template>
<div style="height: 300px;">
<lightning-datatable
key-field="id"
data={data}
columns={columns}>
</lightning-datatable>
</div>
</template>
JS:
import { LightningElement, wire } from 'lwc';
import getData from '@salesforce/apex/BodyConttroller.getData';
const columns = [
{ label: 'Name', fieldName: 'name' },
{ label: 'Info', fieldName: 'info', cellAttributes:{
class:{
fieldName: 'format'
}
}}
];
export default class BodyTable extends LightningElement {
data;
columns = columns;
error;
@wire(getData)
wiredInfo({ error, data }) {
if (data) {
this.data = data;
this.error = undefined;
} else if (error) {
this.error = error;
this.exceptions = undefined;
}
}
}
css:
.test-one {
background : red;
}
Controller:
public without sharing class BodyConttroller {
public class BodyWrapper{
@AuraEnabled
public String name;
@AuraEnabled
public String info;
@AuraEnabled
public String format;
}
@AuraEnabled(cacheable=true)
public static List<BodyWrapper> getData(){
List<BodyWrapper> wrapperList = new List<BodyWrapper>();
for(integer i = 0; i < 10 ; i++){
BodyWrapper expObj = new BodyWrapper();
expObj.name = 'Name' + i;
expObj.info = 'INFO' + i;
expObj.format = 'test-one'; // works when I use 'slds-color__background_gray-7'
wrapperList.add(expObj);
}
return wrapperList;
}
}
The CSS gets applied when I use 'slds-color__background_gray-7'
instead of 'test-one'
. WHat am I missing here?
Best Answer
So I ended up creating a custom column using the instruction provided in the doc - https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation
Just created a new LWC component, whose JS has the
customColumn
defined in there and it uses:So, basically creating a brand new LWC and using that to build data table instead of actually using the
lightning-datatable
tag. More info at - https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation