Lightning data table conditional cell color

Set text or background color for lightning data table rows

Andres Canavesi
Jan 13, 2022
featured image


Let say you want to highlight a cell in a Lightning data table (lightning:datatable) when a specific value is invalid. In our example, we want to display those invalid emails in red.

Expected result

UI component


<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>

                             columns="{! v.columns }"
                             data="{! }"


Component JS controller

doInit : function(component, event, helper) {
        component.set('v.columns', [
            { label: 'First Name', fieldName: 'firstName', type: 'text' },
            { label: 'Last Name', fieldName: 'lastName', type: 'text' },
                label: 'Email', 
                fieldName: 'email', 
                type: 'text',
                cellAttributes: {
                    class: {
                        fieldName: 'emailCellClass'
        component.set('', [
                firstName: "Emelie", 
                email: "", 
                emailCellClass: 'slds-truncate'
                firstName: "John", 
                lastName: "Jackson", 
                emailCellClass : "slds-truncate slds-text-color_error"
Photo by David Pisnoy on Unsplash

lightning salesforce dev