3

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. Commented Jul 15, 2020 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? Commented Jul 15, 2020 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. Commented Jul 16, 2020 at 3:39

1 Answer 1

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

You must log in to answer this question.

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