Conditionally highlight a cell using datatable in LWC

Question

How can we conditionally highlight/color a cell using datatable in LWC? If that's not possible , what are other options to highlight a cell conditionally in the table?

Answer 1

Yes, Conditional Formatting can be done using cellAttributes for data table

For Example, If the requirement is to format/Show all the names of users in Red whose "Due Balance" is greater than 200 and other Usernames in Green the component would be

The working example can be viewed in playground

Code would be: .HTML

    <template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}>
        </lightning-datatable>
    </div>    
</template>

.JS

import {
    LightningElement,
    track
} from 'lwc';

const columns = [{
        label: 'Label',
        fieldName: 'name',
        cellAttributes: {
            class: {
                fieldName: `format`
            },
            alignment: `left`
        }
    },
    {
        label: 'Phone',
        fieldName: 'phone',
        type: 'phone'
    },
    {
        label: 'Balance',
        fieldName: 'amount',
        type: 'currency'
    }
];

const recordMetadata = {
    name: 'name',
    email: 'email',
    website: 'url',
    amount: 'currency',
    phone: 'phoneNumber',
    closeAt: 'dateInFuture',
};

let amountOfRecords = 10;

export default class FormatTable extends LightningElement {
    @track data = [];
    @track columns = columns;


    async connectedCallback() {
        const data = await this.fetchDataHelper({
            amountOfRecords
        });

        //Generate Dynamic Values
        data.forEach(ele => {
            ele.format = ele.amount > 200 ? 'slds-text-color_error' : 'slds-text-color_success';
        });
        this.data = data;
    }

    fetchDataHelper({ amountOfRecords }) {
      const recordMetadata = {
        name: "name",
        email: "email",
        website: "url",
        amount: "currency",
        phone: "phoneNumber",
        closeAt: "dateInFuture"
      };

      return fetch("https://data-faker.herokuapp.com/collection", {
        method: "POST",
        headers: {
          "Content-Type": "application/json; charset=utf-8"
        },
        body: JSON.stringify({
          amountOfRecords,
          recordMetadata
        })
      }).then(response => response.json());
    }
}

Similarly, additional styles can be included as desired and additional icons can also be included

Additionally, more styles can be found in another example in playground

to include additional styles platform-resource-loader can be used

Answer 2

For those looking for an easy reference of background colors / out of the box options, then as previously mentioned you can use the dynamic (row object specified) cellAttributes: { class: {fieldName: 'dataColumnOfClasses'} } or, if fixed for the entire table column, cellAttributes: { class: 'slds-icon-* '} } parameter when defining your columns.

I compiled the set of slds-icon-* classes (by hue and shortest icon reference) as of 2021-04-15 and they are accessible here: Icon Background Colors

Some notes:

1. If the column is editable, then be sure to include slds-cell-edit
2. You can use other slds data table specific classes like slds-has-error: SLDS Data Tables CSS
3. If rows are selectable, then the hover / select will overide the cellAttributes specified background color
4. If you want to keep / change the text color, then add a text class after the background (slds-icon-* slds-text-color_default): SLDS Text

Answer 3

I might be too late to answer the question, but recently was stuck in this situation, I used CSS selector concept to target the particular row's cell. I myslef have gone through all the posts on this thread, but could not found solution other that static resource loader.

I didn't want to use that.Hence, Here is the css code- that needs to be put in the renderedCallback section. ' (this code is making the last row's first cell of the slds-table as bold and setting pointer events as none). Here, the custom-table is the class I have given to the lightning-datatable.

<lightning-datatable
            key-field="id"
            data={data}
            columns={columns}
            class="custom-table">
    </lightning-datatable>



renderedCallback(){
        let style = document.createElement('style');        
        style.innerText = '.custom-table tr:last-child th a{font-weight: bold;color:inherit;text-decoration:none;pointer-events:none;}';
        
        this.template.querySelector('.custom-table').appendChild(style);
    }