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

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. – Nishant Singh Panwar Aug 4 '20 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 '20 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? – Rahul Gawale Sep 17 '20 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 '20 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.