[SalesForce] Background color for lightning data table rows

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?

Best Answer

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