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/


                <div style="height: 300px;">


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

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

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


.test-one {
    background : red;


public without sharing class BodyConttroller {

    public class BodyWrapper{ 
        public String name;
        public String info;
        public String format;

    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'
        return wrapperList;

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

  • 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 Commented Jan 26, 2021 at 4:00
  • 1
    I had to go with using custom columns as custom css is not supported with datatables yet
    – SfdcBat
    Commented Jan 29, 2021 at 23:44

2 Answers 2


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


Rendering of data-table ignores css classes you have on your component. I think it happens because of some sort of ordering in the render process. To apply those , use renderedCallback() function.

let style = document.createElement('style');
style.innerText = '.test-one {background : red;}'
this.template.querySelector('.divDataTable lightningdatatable').appendChild(style);

In this case , wrap data-table with div with class='divDataTable'

Be carefull , as this method applies styling to all data-tables within the page

You must log in to answer this question.

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