Add custom css to lightning-datatable checkbox

Orders for Requirements

1. Add checked status to checkbox according to specific condition.

2. Add visibility css to checked checkbox using custom style.

 

 

HTML

<template>
    <lightning-datatable
        data={data}
        columns={columns}
        key-field="Id"
        onrowselection={getSelectedName}
        selected-rows={preSelectedRows}
    >
    </lightning-datatable>
</template>

 

 

 

 

JavaScript

import { LightningElement } from 'lwc';

const columns = [
    { label: 'Opportunity name', fieldName: 'OpportunityName', type: 'text',         
        cellAttributes: {
            class: 'slds-checkbox_faux.flag flag',
        },
    },
    {
        label: 'Confidence',
        fieldName: 'Confidence',
        type: 'percent',
        cellAttributes: {
            iconName: { fieldName: 'TrendIcon' },
            iconPosition: 'right',
        },
    },
    {
        label: 'Amount',
        fieldName: 'Amount',
        type: 'currency',
        typeAttributes: { currencyCode: 'EUR', step: '0.001' },
    },
    { label: 'Contact Email', fieldName: 'Contact', type: 'email' },
    { label: 'Contact Phone', fieldName: 'Phone', type: 'phone' },
];

const data = [
    {
        Id: 'a',
        OpportunityName: 'Cloudhub',
        Confidence: 0.2,
        Amount: 25000,
        Contact: 'jrogers@cloudhub.com',
        Phone: '2352235235',
        TrendIcon: 'utility:down',
        flag: '-',
    },
    {
        Id: 'b',
        OpportunityName: 'Quip',
        Confidence: 0.78,
        Amount: 740000,
        Contact: 'quipy@quip.com',
        Phone: '2352235235',
        TrendIcon: 'utility:up',
        flag: '*',
    },
];

const setCustomStyle = (style, id) => {
    let styleElement = document.createElement("style");
    styleElement.setAttribute("id", id);
    styleElement.innerHTML = style;
    document.body.appendChild(styleElement);
    console.log("setCustomStyle ===> execution");
}

const removeCustomStyle = (id) => {
    const target = document.querySelector("style#" + id);
    if(target) target.remove();
    console.log("removeCustomStyle ===> execution");
}

const customStyle = {
    style : `
        // .slds-checkbox_faux {
        //     border: 1px solid red !important;
        // }

        // .slds-checkbox_faux.flag, .flag {
        //     border: 1px solid yellow !important;
        // }

        // .slds-th__action.slds-th__action_form.slds-cell-fixed.flag {
        //     border: 1px solid green !important;
        // }

        .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label {
            visibility: hidden;
        }
    `,
    id: `dataTable`
}

export default class dataTable extends LightningElement {
    data = data;
    columns = columns;
    preSelectedRows = [];

    connectedCallback() {
        this.data.forEach((el, idx) => {
            if (el.flag === '-') {
                console.log("el ===> ", el);
                this.preSelectedRows.push(el.Id);
                
                console.log("class (0) ===> ", this.columns[idx]);
                console.log("class (1) ===> ", this.columns[idx].cellAttributes);
                console.log("class (1) ===> ", this.columns[idx].cellAttributes?.class);
                
                if (this.columns[idx].cellAttributes?.class !== undefined) {
                    let target = this.template.querySelectorAll('.slds-th__action.slds-th__action_form.slds-cell-fixed');
                    console.log("check ===> target (1) ", target);

                    // this.columns[idx].cellttributes = {};
                    // this.columns[idx].cellAttributes.class = [];
                    // this.columns[idx].cellAttributes.class.push(this.columns[idx].cellAttributes.class + 'flag');
                    
                    
                    console.log("check ===> this (2)", this.columns[idx].cellAttributes);
                } else {
                    console.log("check ===> this (1) ", this.columns[idx].cellAttributes);
                    this.columns[idx].cellAttributes.class = ['1'];
                    console.log("check ===> this (2)", this.columns[idx].cellAttributes);
                }
                console.log("class (2) ===> ", this.columns[idx].cellAttributes);

                
            }
        })

        setCustomStyle(customStyle.style, customStyle.id)
    }

    disconnectedCallback() {
        removeCustomStyle(customStyle.id)
    }

    getSelectedName(event) {
        console.log("getSelectedName (event) ===> ", JSON.parse(JSON.stringify(event)));
        console.log("getSelectedName (event.detail) ===> ", JSON.parse(JSON.stringify(event.detail)));
        console.log("getSelectedName (event.detail.selectedRows) ===> ", JSON.parse(JSON.stringify(event.detail.selectedRows)));

        
        const selectedRows = event.detail.selectedRows;
        // Display that fieldName of the selected rows
        for (let i = 0; i < selectedRows.length; i++) {
            console.log('You selected: ' + selectedRows[i].OpportunityName);
        }
    }
}