Condition Table

Configurable condition-row editor for building rule-based filters. Composes Input, Select, and Button into an interactive grid. Supports any number of columns via the columns prop.

Usage

Default (3 columns)

FieldOperatorValue

equalsnot equalscontains><exists

equalsnot equalscontains><exists

Add condition

Empty state

No conditions defined. All items will match.

Add condition

4 columns (with Action)

FieldOperatorValueAction

equalsnot equalscontains><exists

ExcludeFlag for Review

Add Rule

States

Disabled

FieldOperatorValue

equalsnot equalscontains><exists

Add condition

Max rows (2)

FieldOperatorValue

equalsnot equalscontains><exists

equalsnot equalscontains><exists

TOKEN REFERENCE

use component tokens from :

--condition-table-header-gap: var(--space-sm)--condition-table-row-gap: var(--space-md)--condition-table-empty-color: var(--color-text-secondary)