Skip to main content
This example uses a Markdown column to display a status value next to a colored indicator dot in a table—green for active and red for inactive. The status value is used as a CSS class name, and the CSS defines the dot color for each possible value. A table column showing each row's status as text next to a colored dot: a green dot for active and a red dot for inactive

​
Setup

In the table visualization, select the column you want to format and set Display as to Markdown. Then add the Markdown template and CSS below. The template sets the field’s value as the class of a <div> so that the matching CSS rule controls the dot’s color, and repeats the value as the label text. Add one CSS class for each possible value in your data—in this example, active and inactive. The class names must match the values exactly, so this pattern works best for fields with a small, fixed set of values that don’t contain spaces or special characters. This example references the status field from the saas__users_detailed view using Mustache syntax. Replace these references with your own field.

​
Example code

Markdown template: 
<div style="display:flex; align-items:center; gap:6px;">
  <div class="{{saas__users_detailed.status.value}}"></div>
  <span>{{saas__users_detailed.status.value}}</span>
</div>
CSS styles: 
<style>
  .status-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .active {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
  }
  .inactive {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: red;
    flex-shrink: 0;
  }
</style>