How to Conditionally Color Data Table Cells
Last updated
Was this helpful?
Last updated
Was this helpful?
This tutorial explains how to customize the appearance of cells within an Avonni Data Table in Avonni Dynamic Components. You'll learn how to apply a consistent style to an entire column or implement powerful conditional styling where a cell's appearance (like its background color) changes based on the data in its row.
SLDS Cell Class AttributeThe key to all cell styling in the Avonni Data Table is the SLDS Cell Class attribute. It's found within the configuration settings for each column.
Select your Avonni Data Table component on the canvas.
In the Properties Panel, go to the Columns section.
Select the specific column you want to style.
Navigate to the Cell Attributes settings for that column.
Locate the SLDS Cell Class input field.
This field accepts standard SLDS (Salesforce Lightning Design System) class names, allowing you to control text color, background color, font weight, and more.
Use this simple method when you want every cell in a specific column to have the same, unchanging style.
Steps:
Navigate to the SLDS Cell Class attribute for your desired column (as described above).
Directly type the SLDS class names you want to apply into the field. Separate multiple classes with a space.
Example 1: To make all text in the column green and bold, enter: slds-text-color_success slds-font-weight_bold
Example 2: To give all cells a light grey background and capitalize the text, enter: slds-theme_shade slds-text-title_caps
The styling will be applied consistently to all rows in that column.
This is a more powerful technique where a cell's appearance changes dynamically based on the data within its row. This is perfect for visually indicating status, priority, or risk levels.
The easiest and most maintainable way to achieve this is by mapping the SLDS Cell Class attribute directly to a Salesforce Formula Field.
First, create a formula field on the Salesforce object that your data table displays (e.g., on the Opportunity, Case, or Account object). This formula will determine which SLDS classes to use based on other fields in the record.
In Salesforce Setup, navigate to the object you are using (e.g., Opportunity).
Create a new Formula Field.
Set the Formula Return Type to Text.
In the formula editor, use logic (like a CASE() or IF() statement) to output the desired SLDS class string.
Example Formula on an Opportunity object (Field Name: StageStyle):
This formula checks the StageName field and returns a different set of SLDS classes for each stage, resulting in different background/text colors.
Save your new formula field.
Update Your Query: In your Dynamic Component, go to the Avonni Query Data Source for your Data Table. Crucially, make sure to add your new Salesforce formula field (e.g., StageStyle__c) to the list of queried fields.
Map the Column: In the Data Table's properties, go to the Columns section and select the column you want to style (e.g., the StageName column).
Bind the SLDS Cell Class:
Navigate to the Cell Attributes for that column.
Find the SLDS Cell Class property.
Toggle the field name option.
Select your new Salesforce formula field from the list of available fields (e.g., StageStyle__c).
Result: When the component loads, the Data Table will evaluate the StageStyle__c formula field for each row. It will then apply the corresponding SLDS classes, automatically coloring each cell based on the Opportunity's stage.
Here are some standard SLDS classes you can use in your formulas or for static styling (combine them with spaces):
Backgrounds: slds-theme_success (green), slds-theme_error (red), slds-theme_warning (yellow), slds-theme_info (blue), slds-theme_shade (light grey - a good base).
Text Color: slds-text-color_success (green), slds-text-color_error (red), slds-text-color_warning (dark yellow), slds-text-color_inverse (white - for dark backgrounds).
Text Style: slds-text-title_caps (ALL CAPS), slds-font-weight_bold (bold), slds-font-style_italic (italic).
The SLDS Cell Class attribute provides a flexible way to enhance data presentation in your Avonni Data Table. You can apply simple static styling or, more powerfully, use Salesforce Formula Fields to implement data-driven conditional formatting, effectively highlighting key information for your users
