> 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/dynamic-components/tutorials/components/data-table/add-status-indicators.md).

# 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
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 dynamically by asking a question.

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

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.