Lightning data table conditional cell color

Lightning data table conditional cell color
Reading Time: 2 minutes

Are you looking to add a bit of personality and flair to your lightning data table? Conditional cell color gives designers and developers the opportunity to transform their table into something unique and eye-catching.

With conditional cell color, you are able to control the color of a cell and its contents based on the value of a particular item in the table. This means that each cell in a row can have its own distinct color, letting you highlight important information, emphasize data, and make the table look more visually appealing.

Expected result

Salesforce Lightning is a component-based framework for building user interfaces on the Salesforce platform. It provides a modern and efficient way for developers to create and deploy custom user interfaces that can run on any device, including desktops, laptops, tablets, and smartphones.

A Lightning Component is a reusable unit of code that implements a specific feature or functionality. Components can be composed into larger applications and can be easily reused and customized to meet different business needs. They are written in Aura, a proprietary JavaScript-based language, and use the Lightning Data Service to communicate with the Salesforce server.

Lightning Components provide a number of benefits, including faster performance, improved user experience, and greater customization options compared to traditional Salesforce user interfaces. They are an essential part of the Salesforce Lightning platform and are widely used by organizations to build custom applications and extend the functionality of the Salesforce platform.

Lightning data tables allow users to customize the colors of cells in a table based on the values of the cell using conditional formatting. This is a powerful tool for quickly identifying trends and outliers in data sets. With Lightning data tables, Salesforce developers can set color thresholds to automatically color cells according to whether their value is above/below a certain value or between two values. This feature is especially useful for displaying numerical values such as sales data, which often need to be highlighted at a glance so that users can quickly identify areas for improvement.

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.

The 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="{! }"

The Component’s 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"

, , ,

About the author

Andrés Canavesi
Andrés Canavesi

Software Engineer with 15+ experience in software development, specialized in Salesforce, Java and Node.js.

Join 22 other subscribers

2 responses to “Lightning data table conditional cell color”

Leave a Reply