How to Use Conditional Formatting in Retool Tables

Click on the Table component to select it. In the Inspector panel, scroll to the Columns section. Click the pencil icon next to the column you want to format — for example, a 'status' column. A column detail panel opens. Scroll down to find the 'Background color' and 'Text color' fields under the 'Formatting' or 'Styles' section. These fields accept either a static hex color string or a {{ }} Retool expression.

In the Background color field, enter a ternary expression using {{ currentRow.status }}. The currentRow variable is a special context object available inside Table column expressions — it gives you access to every field in the current row being rendered. Use a ternary expression to return different hex colors for different status values. For the Text color field, set a contrasting color so text remains readable against the background.

1// Background color field — for a 'status' column
2{{ currentRow.status === 'active' ? '#d1fae5'
3  : currentRow.status === 'pending' ? '#fef3c7'
4  : currentRow.status === 'overdue' ? '#fee2e2'
5  : 'transparent' }}
6
7// Text color field — keeps text readable on colored backgrounds
8{{ currentRow.status === 'active' ? '#065f46'
9  : currentRow.status === 'pending' ? '#92400e'
10  : currentRow.status === 'overdue' ? '#991b1b'
11  : 'inherit' }}

For status columns, the Tag column type is often better than manual color expressions. Click the column's Type dropdown and select 'Tag'. A Tag Mapping section appears below. Click '+ Add tag' to map each status value to a color. For example: 'active' → Green, 'pending' → Yellow, 'overdue' → Red, 'completed' → Blue. The table automatically renders each cell as a colored rounded badge pill. Tag column type is ideal for low-cardinality status fields.

For numeric columns like 'days_overdue' or 'balance', apply colors based on thresholds rather than exact values. Use JavaScript comparison operators in the background color expression. This creates a traffic-light effect where the color intensity changes based on how far the value is from the threshold.

1// Background color for a 'days_overdue' numeric column
2{{ currentRow.days_overdue > 30 ? '#fca5a5'
3  : currentRow.days_overdue > 14 ? '#fcd34d'
4  : currentRow.days_overdue > 0 ? '#fef3c7'
5  : 'transparent' }}
6
7// Background color for a 'utilization_pct' column
8{{ currentRow.utilization_pct >= 90 ? '#fee2e2'
9  : currentRow.utilization_pct >= 75 ? '#fef3c7'
10  : '#d1fae5' }}

To highlight entire rows (not just individual cells), find the 'Row color' or 'Row background color' setting in the Table Inspector's General section. This accepts the same {{ currentRow.xxx }} expression syntax and applies the color across every cell in the matching row. Row-level coloring is useful for highlighting selected rows, flagging rows that meet a critical condition, or alternating row colors by index.

1// Row background color — in the Table's General section
2// Highlight rows where any column meets a critical threshold
3{{ currentRow.priority === 'critical' ? '#fee2e2'
4  : currentRow.is_flagged ? '#fef3c7'
5  : 'transparent' }}
6
7// Alternating row colors (zebra striping)
8{{ currentRow._index % 2 === 0 ? '#f9fafb' : 'transparent' }}

For the most control, use a Custom column type instead of Background color expressions. In Custom column type, the Cell content field accepts HTML-like {{ }} expressions. You can render a colored span element with inline styles, an SVG icon, or any custom markup. This is more powerful than the Background color field because you control the entire cell content, not just its color.

1// Custom column type — Cell content field
2// Renders a colored dot + text for the status
3<div style="display: flex; align-items: center; gap: 6px;">
4  <span style="
5    width: 8px;
6    height: 8px;
7    border-radius: 50%;
8    background: {{ currentRow.status === 'active' ? '#10b981' : currentRow.status === 'overdue' ? '#ef4444' : '#f59e0b' }};
9  "></span>
10  <span>{{ currentRow.status }}</span>
11</div>