0

I have trouble adding a background color to one of the columns of this lwc datatable. I got this idea from the blog - https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/

HTML:

<template>
                <div style="height: 300px;">
                    <lightning-datatable
                            key-field="id"
                            data={data}
                            columns={columns}>
                    </lightning-datatable>
                </div> 
</template>

JS:

import { LightningElement, wire } from 'lwc';
import getData from '@salesforce/apex/BodyConttroller.getData';

const columns = [
    { label: 'Name', fieldName: 'name' },
    { label: 'Info', fieldName: 'info', cellAttributes:{  
        class:{  
            fieldName: 'format'
        } 
    }}
];

export default class BodyTable extends LightningElement {
    data;
    columns = columns;
    error;
    @wire(getData)
    wiredInfo({ error, data }) {
        if (data) { 
            this.data = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.exceptions = undefined;
        }
    }
}

css:

.test-one {
    background : red;
}

Controller:

public without sharing class BodyConttroller {

    public class BodyWrapper{ 
        @AuraEnabled
        public String name;
        @AuraEnabled
        public String info;
        @AuraEnabled
        public String format;
    }

    @AuraEnabled(cacheable=true)
    public static List<BodyWrapper> getData(){
        List<BodyWrapper> wrapperList = new List<BodyWrapper>();
        for(integer i = 0; i < 10 ; i++){
            BodyWrapper expObj = new BodyWrapper();
            expObj.name = 'Name' + i;
            expObj.info = 'INFO' + i;
            expObj.format = 'test-one'; // works when I use 'slds-color__background_gray-7'
            wrapperList.add(expObj);
        }
        return wrapperList;
    }
}

The CSS gets applied when I use 'slds-color__background_gray-7' instead of 'test-one'. WHat am I missing here?

2
  • 2
    It is probably not happening due to presence of shadow-boundary, the css defined by you within the component is not crossing the shadow boundary of lightning-datatable, you might want to check design tokens and see if that works for you. Slds classes will still work since they are global for each lightning Web component Jan 26 at 4:00
  • 1
    I had to go with using custom columns as custom css is not supported with datatables yet
    – SfdcBat
    Jan 29 at 23:44
1

So I ended up creating a custom column using the instruction provided in the doc - https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

Just created a new LWC component, whose JS has the customColumn defined in there and it uses:

import LightningDatatable from 'lightning/datatable';
import deleteRow from './<<new template name>>.html';

export default class MyDatatable extends LightningDatatable

So, basically creating a brand new LWC and using that to build data table instead of actually using the lightning-datatable tag. More info at - https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

enter image description here

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.