DataTableColorColumnController.js

({
    /**
     * Init function
     * setup columns and data in this function
     * @author Manish Choudhari
     * */
    doInit : function(component, event, helper) {
        //Let's configure the columns of the data table
        component.set('v.columns', [
            //Key here is cellAttributes object for Particular column
            {label: 'Name', fieldName: 'name', type: 'text'},
            //Diet type column can accept a css class. The css class name should be passed in field name "dietClass" from server
            {label: 'Diet Type', fieldName: 'diet', type: 'text', cellAttributes: { class: { fieldName: 'dietCSSClass' }}},
            {label: 'Blood Group', fieldName: 'bloodGroup', type: 'text'},
            //likewise fvtColor column can also have a css class in fvtColorCSSClass field
            {label: 'Favourite Color', fieldName: 'fvtColor', type: 'text', cellAttributes: { class: { fieldName: 'fvtColorCSSClass' }}},
            //and working column can have a css class in workingCSSClass field
            {label: 'Working', fieldName: 'working', type: 'boolean', cellAttributes: { class: { fieldName: 'workingCSSClass' }}}
        ]);
        
        const data = [];
        data.push({name : 'Manish', diet : 'Vegeterian', dietCSSClass : 'diet-veg', bloodGroup : 'AB+', 
                   fvtColor : 'Blue', fvtColorCSSClass : 'color-blue', working : true, workingCSSClass : 'working-true'});
        data.push({name : 'Peter', diet : 'Non-Vegeterian', dietCSSClass : 'diet-nveg', bloodGroup : 'B+', 
                   fvtColor : 'Grey', fvtColorCSSClass : 'color-grey', working : true, workingCSSClass : 'working-true'});
        data.push({name : 'Alex', diet : 'Non-Vegeterian', dietCSSClass : 'diet-nveg', bloodGroup : 'A-', 
                   fvtColor : 'Blue', fvtColorCSSClass : 'color-blue', working : false, workingCSSClass : 'working-false'});
        data.push({name : 'Shane', diet : 'Non-Vegeterian', dietCSSClass : 'diet-nveg', bloodGroup : 'O+', 
                   fvtColor : 'Green', fvtColorCSSClass : 'color-green', working : true, workingCSSClass : 'working-true'});
        data.push({name : 'Malisa', diet : 'Vegeterian', dietCSSClass : 'diet-veg', bloodGroup : 'AB-', 
                   fvtColor : 'Orange', fvtColorCSSClass : 'color-orange', working : false, workingCSSClass : 'working-false'});
        data.push({name : 'Angelina', diet : 'Vegeterian', dietCSSClass : 'diet-veg', bloodGroup : 'AB+', 
                   fvtColor : 'Pink', fvtColorCSSClass : 'color-pink', working : false, workingCSSClass : 'working-false'});
        data.push({name : 'Liana', diet : 'Non-Vegeterian', dietCSSClass : 'diet-nveg', bloodGroup : 'B+', 
                   fvtColor : 'Cyan', fvtColorCSSClass : 'color-cyan', working : false, workingCSSClass : 'working-false'});
        data.push({name : 'Holly', diet : 'Vegeterian', dietCSSClass : 'diet-veg', bloodGroup : 'B-', 
                   fvtColor : 'Grey', fvtColorCSSClass : 'color-grey', working : true, workingCSSClass : 'working-true'});
        data.push({name : 'Rick', diet : 'Vegeterian', dietCSSClass : 'diet-veg', bloodGroup : 'A+', 
                   fvtColor : 'Grey', fvtColorCSSClass : 'color-grey', working : true, workingCSSClass : 'working-true'});
        
        component.set("v.data", data);
    }
})