# Add Status Indicators

## Overview

This tutorial explains how to display a colored status dot inside an [**Avonni Data Table**](/dynamic-components/components/data-table.md) column, so that each row’s status (for example, “Open”, “In Progress”, “Closed”) appears as a compact, color-coded circle rather than plain text.

<figure><img src="/files/80l0CgqjNyS4Tljd3qio" alt=""><figcaption></figcaption></figure>

***

## Guided Steps

{% stepper %}
{% step %}

#### Create the status color formula field

Create a text formula field on the object you’re querying in the Data Table. This formula will dynamically return the color code for the status dot. Here’s an example that uses the StageName field and assigns a hex color value to each stage.

<figure><img src="/files/1ltJh6eAKlThE1whQP1h" alt=""><figcaption></figcaption></figure>

```
IF( ISPICKVAL(StageName,‘Perception Analysis’), ‘#FE9339’,
IF( ISPICKVAL(StageName,‘Value Proposition’), ‘#FCC003’,
IF( ISPICKVAL(StageName,‘Id. Decision Makers’), ‘#FF5D2D’,
IF( ISPICKVAL(StageName,‘Proposal/Price Quote’), ‘#04E1CB’,
IF( ISPICKVAL(StageName,‘Qualification’), ‘#FF906E’,
IF( ISPICKVAL(StageName,‘Negotiation/Review’), ‘#41B658’,
IF( ISPICKVAL(StageName,‘Prospecting’), ‘#EA001E’, ‘#04E1CB’)))))))
```

{% endstep %}

{% step %}

#### Add the Data Table and include the formula column

Add the Data Table component, configure it with the Query data source, and include the formula field column in the table.

<figure><img src="/files/UcwHpXjIZ8MvHtqgjY2F" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Add a Badge column for the status dot

Create a new column for the colored dot. This column will be linked to the Stage field and set its Type to Badge

<figure><img src="/files/35CinlnfP62eYITVCmzr" alt="" width="188"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Configure the Badge to use the formula field

* Turn on the custom label option, but leave it empty so the Data Table column has no header label.
* Select **Badge** as the **type**.
* For the Badge attribute, enable the **Field Name option** and **select the formula field** you created in step 1. This will dynamically assign a color based on the formula’s result

<figure><img src="/files/NkDbjm1fMbSVUb9j9t4A" alt="" width="258"><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

You’ve now added a color status dot to your Data Table, making it easier to visually highlight key information at a glance.


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/add-status-indicators.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.