[SalesForce] LWC lightning-datatable not accepting cellAttributes in the first column

Lightning-datatable is not accepting any cellattributes in the first column. All other columns are formatting correctly. Is this a limitation, or am I doing something wrong? (Irrelevant code removed for brevity.)

lwct_no_formatting_first_Column

HTML:

<template>
    <lightning-card title = "Service Territory Membership" icon-name="standard:service_crew">
        <template if:true={membersList}>
            <div style="height : 300px;">
                <lightning-datatable
                    key-field="serviceTerritoryMemberId"
                    data={membersList}
                    columns={columns}
                    hide-checkbox-column>
                </lightning-datatable>
            </div>
        </template>
        <template if:true={error}>
            <p>There was an error loading the Service Territory Members.</p>
        </template>
    </lightning-card>
</template>

JAVASCRIPT:

const columns = [
    {label : 'Resource', fieldName : 'resourceURL', type: 'url', typeAttributes: 
        {label: { fieldName: 'serviceResourceName' }, target: '_blank' }, cellAttributes :
        {class: { fieldName : 'cellStyle' }}},
    {label : 'Territory', fieldName : 'terrURL', type: 'url', typeAttributes: 
        {label: { fieldName: 'serviceTerritoryName' }, target: '_blank' }, cellAttributes :
        {class: { fieldName : 'cellStyle' }}}]

const attributesByTerrType = [
    {territoryType: 'P', cellStyle : 'slds-text-title_bold'},
    {territoryType: 'S', cellStyle : 'slds-text-body_regular'}
]

export default class Fsl_STM_ViewMembership extends LightningElement {

    @api recordId;
    @api objectApiName;

    columns = columns;
    attributesByTerrType = attributesByTerrType;
    @track membersList = [];
    @track error;

   @wire(getSTMData, {myRecordId : '$recordId', objectType :'$objectApiName'})
    wiredSTMs({error, data}){
        if(data){
            const newmemlist = [];
            data.forEach(member => {
                var newmem = {
                serviceTerritoryMemberId : member.serviceTerritoryMemberId,
                serviceTerritoryName : member.serviceTerritoryName,
                serviceTerritoryMemberNumber : member.serviceTerritoryMembernumber,
                serviceResourceName : member.serviceResourceName,
                resourceURL : "/" + member.serviceResourceId,
                terrURL : "/" + member.serviceTerritoryId,
                territoryType : member.territoryType,
                cellStyle : this.attributesByTerrType.find( ({ territoryType }) => territoryType === member.territoryType).cellStyle,
                membershipDesc : member.membershipDesc,              
                operatingHoursId : member.operatingHoursId
            }
                newmemlist.push(newmem);
            });
            this.membersList = newmemlist;
            this.error = undefined;
        } else if (error){
            this.error = error;
            this.membersList = undefined;
        }
    }

}

Best Answer

The first column of lightning-datatable is a th element, while all remaining columns are a td element. This is a problem for your class, because of this slds rule:

.slds-table th {
    font-weight: 400;
}

Which ends up being having more specificity than your class:

.slds-text-title_bold {
    font-size: .875rem;
    font-weight: 700;
}

So, it's not specifically that styles don't work on the first column, but rather it's that font-weight isn't something you can easily override in the first column, as you'd have to specify an even more specific CSS rule to override the behavior, which you can't, because custom classes aren't supported, at least for now.

You'll want to perhaps reorder your data such that you don't have a font-size you're trying to override in the first column, or perhaps leave a small, empty column on the left, use a different style that doesn't conflict with the header column, or something else.

I leave you this sample file you can use to get started, where we use a monospace font for a specific territory. Other possibilities are out there, too, just not making the first column bold.