3

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

Console Output

2 Answers 2

3

Unfortunately, only standard SLDS classes work with cellAttributes, but you are fortunate that we have a standard class to make text red. Use slds-text-color_destructive to get the red font color.

2
  • 1
    Wooh... You saved me from the all difficult alternatives from redesigning the component. Yes, fortunate that I just need the red color. :) Thank You, Rahul! Very much appreciated. Aug 4, 2020 at 19:02
  • Is this something new? I can find this in documentation? check the photo I shared in the answer below Sep 16, 2020 at 19:55
0

I can see in the documentation that this seems to be possible. Can anyone highlight why it was not working for me or now it is possible?

https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation

enter image description here

2
  • It has been there from the beginning but didn't work, might be possible that it started working lately. Did you try it? Sep 17, 2020 at 6:45
  • 1
    No, I was working on another similar thing and noticed this and tried again but still, it was not working. Sep 17, 2020 at 11:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .