I have created a LWC which lists data into a component using lightning datatable. The data gets displayed correctly
Further, I am trying to format one particular column to display the values with bold font.
Below is the css code which I am using.
.contentClass {
font-weight: bold;
}
Below is the JS file code to format columns:
const COLS = [
{ label: 'Month', fieldName: 'Schedule_Date__c', type: "date",
typeAttributes:{
year: "numeric",
month: "long"
}},
{ label: 'Amount', fieldName: 'Amount__c',editable: true,cellAttributes: { class: 'contentClass' }}
];
The table has two columns, Date and Amount. Date formatting using typeAttributes work fine.
For displaying Amount in bold font. I have added the cellAttributes with class name specified in the css file.
However the Amount cell doesn't get formatted.
One tweak makes this work, i.e. if I include the class in html file. The cell formatting is reflected and the Amount Cell data appears in bold font.
Below is the excerpt of HTML file code, where I explicitly add contentClass in the div tag.
<div class="slds-m-around_medium contentClass">
<template if:true={revenueSch.data}>
<lightning-datatable
key-field="Id"
data={result.data}
columns={columns}
onsave={handleSave}
draft-values={draftValues}
hide-checkbox-column="true"
show-row-number-column="false">
</lightning-datatable>
</template>
<template if:true={result.error}>
<!-- handle Apex error -->
</template>
</div>
Is this a bug, wherein the lwc component expects the class to be part of some html tag? Or am I specifying the cellAtrributes incorrectly? Any insights here would help!
