> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md).

# How to Conditionally Color Cells

Give each Stage cell of a screen flow Data Table its own background color, from one formula field that returns an SLDS class per row.

A sales manager scans twenty open deals on a screen before deciding which ones to reassign. When the Stage cells are colored by stage (light gray for early stages, light blue for analysis, yellow for negotiation, green for won, pink for lost), the pipeline reads at a glance.

Each cell gets its color from a text formula field on Opportunity. The formula returns an SLDS class name, and the Data Table adds that class to the cell, row by row.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F8gUXFgLVWPQwCO7UBZgL%2Fdata-table-tutorial-how-to-conditionally-color-cells-result.png?alt=media" alt="Data Table of opportunities whose Stage cells have a background color per stage: green for Closed Won, pink for Closed Lost, yellow for negotiation, blue for Needs Analysis, gray for Qualification"><figcaption><p>The Stage Style formula gives each Stage cell its background.</p></figcaption></figure>

{% hint style="info" %}
Prefer a colored pill to a colored cell? See [Customizing the badge color using a formula](/flow/tutorials/components/data-table/tips-and-tricks/customizing-the-badge-color-using-a-formula.md).
{% endhint %}

## Before you start

* A screen flow with an Avonni Data Table that lists Opportunities, with a **Stage** column. If you are starting from scratch, follow [Learn the Basics](/flow/tutorials/components/data-table/learn-the-basics.md) first.
* The table uses the **Query** or **Variable** data source. See [Data Source](/flow/flow-components/data-table.md#data-source).
* Permission to create fields in Object Manager.

## Steps

{% stepper %}
{% step %}

### Create the style formula field

1. In Setup, open **Object Manager** > **Opportunity** > **Fields & Relationships** > **New**.
2. Choose **Formula**, name the field `Stage Style`, and set the return type to **Text**.
3. Paste this formula:

```
CASE(StageName,
  "Prospecting", "slds-theme_shade",
  "Qualification", "slds-theme_shade",
  "Needs Analysis", "slds-theme_info",
  "Value Proposition", "slds-theme_info",
  "Id. Decision Makers", "slds-theme_info",
  "Perception Analysis", "slds-theme_info",
  "Proposal/Price Quote", "slds-theme_warning",
  "Negotiation/Review", "slds-theme_warning",
  "Closed Won", "slds-theme_success",
  "Closed Lost", "slds-theme_error",
  "")
```

The last value, `""`, leaves any other stage unstyled.
{% endstep %}

{% step %}

### Make the field reach the table

* **Query** data source: nothing to do, the field is available in the column settings.
* **Variable** data source: the record collection comes from a Get Records element. Make sure that collection includes the `Stage Style` field.

The field does not need its own column. The table only reads it.
{% endstep %}

{% step %}

### Bind the cell class to the formula

1. Select the Data Table on the screen and click **Open Component Builder**.
2. On the **Properties** tab, in the **Data Mappings** section, open **Columns** and click the **Stage** column.
3. In the column's **Cell Attributes**, next to **Slds Cell Class**, turn on the **Field Name** toggle so each row reads its own value from a field ([how the toggle works](/flow/flow-components/data-table.md#take-a-value-from-each-row)). For **Slds Cell Class** it shows a field list: pick **Stage Style**.
4. Click **Save** in the column popover, then **Done**.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F1iHYjhuVIo8c9kaTyWNP%2Fdata-table-tutorial-how-to-conditionally-color-cells-cell-attributes.png?alt=media" alt="Stage column settings with Cell Attributes, where Slds Cell Class has its Field Name toggle on and the Stage Style field selected" width="320"><figcaption><p>Slds Cell Class reads the class of each row from Stage Style.</p></figcaption></figure>
{% endstep %}

{% step %}

### Save and test

Save the flow and click **Debug** (or **Run**). Each Stage cell takes the background of its stage: Closed Won mint green, Closed Lost light pink, Proposal/Price Quote and Negotiation/Review light yellow, the analysis stages light blue, Prospecting and Qualification light gray.
{% endstep %}
{% endstepper %}

## Alternative: one style for the whole column

To style every cell of a column the same way, for example to put the Amount column in bold, skip the formula. In the column's **Cell Attributes**, leave the **Field Name** toggle off and type the classes into **Slds Cell Class**, separated by spaces:

```
slds-text-heading_small
```

## Classes that work well in a cell

A formula can return several classes separated by a space, for example `"slds-theme_shade slds-text-title_caps"`.

| Class                     | Effect                  |
| ------------------------- | ----------------------- |
| `slds-theme_success`      | Mint green background   |
| `slds-theme_error`        | Light pink background   |
| `slds-theme_warning`      | Light yellow background |
| `slds-theme_info`         | Light blue background   |
| `slds-theme_shade`        | Light gray background   |
| `slds-text-color_success` | Green text              |
| `slds-text-color_error`   | Red text                |
| `slds-text-color_weak`    | Gray text               |
| `slds-text-title_caps`    | Small capitals          |
| `slds-text-heading_small` | Larger, heavier text    |

Text classes are handy for numbers. For example, a formula on Amount that returns `"slds-text-color_error"` below 20,000 and `""` otherwise turns small deals red.

## Troubleshooting

<details>

<summary>No cell changes color</summary>

* Check the **Field Name** toggle is on next to **Slds Cell Class**. With it off, the box holds a literal class name, not a field.
* The formula return type must be **Text**.
* With a **Variable** data source, the Get Records collection must include the formula field.

</details>

<details>

<summary>Some rows are colored, others are not</summary>

`CASE()` compares the exact picklist value. Add the missing stages, check their spelling in Setup, and keep a last default value (`""`) for anything else.

</details>

<details>

<summary>The formula does not save</summary>

Use straight quotes (`"`), not curly ones, and check that every value has its pair: a `CASE()` needs the field, then value and result pairs, then one default.

</details>

## Related tutorials

* [Customizing the badge color using a formula](/flow/tutorials/components/data-table/tips-and-tricks/customizing-the-badge-color-using-a-formula.md): the same idea with colored badges.
* [How to set column visibility](/flow/tutorials/components/data-table/tips-and-tricks/how-to-set-column-visibity.md): show a column only to the users who need it.
* [Handling formula text fields](/flow/tutorials/components/data-table/tips-and-tricks/handling-formula-text-field.md): display the result of a text formula in a column.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.