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.)
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 atd
element. This is a problem for your class, because of this slds rule:Which ends up being having more specificity than your class:
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.