2

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!

3
  • 1
    Looks like only standard slds CSS supported there. Try putting your CSS into a static resource. Or optionally if suitable you can use one of the standard text stylings mentioned here. – Rahul Gawale Jul 15 '20 at 15:34
  • 1
    Can try it out with static resource. Some standard styles work, while some of them don't. I have a workaround in place. What I am looking for, is if this is by design or its a bug, that custom css won't work in cellAttributes? – Hemant Jain Jul 15 '20 at 17:54
  • It is a bummer that custom CSS doesn't work. nice to know that some of the standard CSS doesn't work. It seems a bug to me. – Rahul Gawale Jul 16 '20 at 3:39
1

The custom classes cannot be applied to cell attributes. Please refer to the salesforce ref. document.

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

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.