SYIDAX / DATA GRID

Conditional formatting

Change cell backgrounds and text styles based on value conditions.

Get started
Conditional formattingSample order data
120 rows
Loading Grid…
Latest result

For example, highlight quantities of at least 100. Keep this meaning distinct from selection background colors.

View code
Current preview

Usage guide

#

Distinguish quantities above a threshold or amounts requiring review using colors and text styles.

Integration steps

  1. Define a highlighting threshold

    For example, highlight quantities of at least 100. Keep this meaning distinct from selection background colors.

  2. Connect rules and styles

    Assign conditional formatting rules or enable conditionalFormatUi for user editing.

  3. Check boundary conditions

    Test values below, equal to, and above the boundary to verify only intended cells receive the style.

Expected results

Data-driven highlighting makes items requiring attention easier to find.

The current sample has no business conditional formatting rules. Selection and focus colors are separate indicators.

Useful terms

Conditional formatting
Display rules applied when data meets specified conditions.
Boundary value
The threshold where a condition changes, such as 100 in at least 100.

API reference

#

Other properties2
Attribute / PropertyType / DefaultDescription
conditionalFormats
ConditionalFormatRule[]Default: undefinedConditional Formatting. A grid-level list of rules; each targets a column (or all), tests the cell value against a condition (equals / ranges / text / blank), and contributes a style (background / color / weight / …) when it matches. Rules merge in order (later wins) and honor Excel's `stopIfTrue`. Colors are sanitized. Property-only; empty/undefined = off (zero overhead). Evaluated on the DISPLAYED value, so an RBAC-masked cell is never styled by its hidden real value.
conditionalFormatUi
booleanDefault: falseshow the built-in Conditional Formatting rule builder (a toolbar button that opens an Excel-style rules panel: column / condition / value / colors). Editing the rules updates `conditionalFormats` live and fires `conditionalFormatsChanged`. Off by default.
Events1
EventsDetail typeDescription
{ rules: ConditionalFormatRule[] }Fires when the built-in CF builder edits the rules.