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

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
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.
    – Nishant Singh Panwar
    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
    – Nishant Singh Panwar
    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

Improve this answer
2
  • It has been there from the beginning but didn't work, might be possible that it started working lately. Did you try it?
    – Rahul Gawale
    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.
    – Nishant Singh Panwar
    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 .