I Have created an LWC component with following files
.HTML file
...
<lightning-datatable
key-field="id"
data={data}
columns={columnsInProgress}
is-loading={tableLoadingState}
hide-checkbox-column=true>
</lightning-datatable>
...
.js file
...
const columnsInProgress = [
{ label: 'Opportunity', fieldName: 'OpportunityName', fieldName: 'oppUrl', type: 'url',
typeAttributes: {label: { fieldName: 'OpportunityName' }, target: '_self'},
},
{ label: 'Type', fieldName: 'OpportunityType',
cellAttributes: {class : {fieldName:'oppTypeClass'}}
},
{ label: 'Stage', fieldName: 'OpportunityStage' },
{ label: 'Next Step', fieldName: 'OpportunityNextStep' }
];
...
assignment
...
if(row.lkpOpportunityActive__r.RecordType){
rowData.oppTypeClass = row.lkpOpportunityActive__r.RecordType.Name == 'Retention'?'fontRed':'';
}
...
.css
td.fontRed {
color: red;
}
Now the cell is getting the CSS class applied but the text is not changing RED because the CSS file is not getting applied somehow. How can we control and apply the CSS dynamically?
OUTPUT