Dynamic CSS on Lightning Data Table

 It is easy to apply CSS on custom component but things get little different when it comes to the standard LWC component. This is because of CSS Isolation due to shadow DOM of web component.

CSS outside the component can now only affect the top-level of the component. This is not the same as Aura, where you could affect internals with CSS. CSS cannot affect parent, child, or sibling's CSS. It is completely isolated, which allows a component to appear as the developer intended regardless of what anyone else might do to that component.

Very often we need to apply CSS dynamically on Lightning-Data-Table but due to shadow DOM restrictions we have to switch to standard HTML table. 

But here we are having multiple approach to apply styling on lightning-data-table without switching.

Using cellAttributes

 While defining the columns of lightning-data-table. we can define the CSS class with cellAttributes. 

const columns = [
    { label: 'Label', fieldName: 'name' },
    { label: 'Website', fieldName: 'website' },
    { label: 'Phone', fieldName: 'phone' },
    { label: 'Balance', fieldName: 'amount', type: 'currency', 
        cellAttributes:{class : {fieldName:'cssClass'}}}];

There are two scenarios with cellAttributes.

1. Standard SLDS - We can apply SLDS class directly with cellAttributes and it will work.
2. Custom CSS - CSS styles defined in component doesn't work and the reason is again shadow DOM. A parent component don’t leak into a child and styles don’t reach into the shadow tree. 

Then how we can do that or where we have to define the custom CSS style. No worries, We can define CSS in two ways.

1. Static Resource - Define stylesheet and upload in static resource and load in component itself.
2. Create style element and define the CSS inside this and add it to component itself dynamically. this logic we can put into renderedCallback() method.

renderedCallback() {
        let customStyle = document.createElement('style');
        customStyle.innerText=
        '.greenBackground{background-color: green;}';
        this.template.querySelector('.scope').appendChild(customStyle);
}

Traversing the DOM and apply CSS using stylesheet.

This is another way to apply the CSS on lightning-data-table. We all know once the web component will render on browser ultimately lightning-data-table will convert into html table. so if you know the traversing of DOM in CSS this solution is for you.
Make sure you give a unique CSS class to lightning-data-table component so the CSS will only apply on that particular data table.

Again we can define CSS in two ways.
    1. Static Resource - Define stylesheet and upload in static resource and load in component itself.
    2. Create style element and define the CSS inside this and add it to component itself dynamically. this logic we can put into renderedCallback() method.

renderedCallback() {
        let customStyle = document.createElement('style');
        customStyle.innerText=
        '.table-style tr:nth-child(odd), .table-style tr.odd.odd { background-color: #eaeaea;}'+
        '.table-style tr:nth-child(even), .table-style tr.even.even {background-color: #fff;}' +
        '.table-style tr:nth-child(even) td:nth-child(even) {color: green !important;}';
        this.template.querySelector('.scope').appendChild(customStyle);
}

Click here to view/download the code for Dynamic CSS on Lightning-Data-Table.