experiment_id: web-retrieval-v1
fixture_id: /docs/features/conditional-formatting
mode: provenance
representation: html
origin_response_id: a8db7a3d25aa637c0bff9b5442db877d
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.603Z
version_nonce: cb7f6992cb870ace1880667c42c1522a
generated_at_utc: 2026-11-05T17:40:03.017Z
response_nonce: e8dd6f15361acc3d8d9f2d3be6778109
Docs Version 1

Conditional Formatting

ZingGrid has conditional formatting for cells so you can render different content based on a value.

Row Formatting

You can style rows by adding the row-class attribute to the <zing-grid> tag, like so:

<zing-grid row-class="_renderStocks"></zing-grid>

Conditionally Formatted Rows Grid

Here is a complete grid that has been formatted so that rows for days with gains are styled in green and days with losses are styled in red:

Top

Column Formatting

You can style columns by adding the col-class attribute to the <zing-grid> tag ,like so:

<zing-grid col-class="_highlightClose"></zing-grid>

Conditionally Formatted Columns Grid

Here is a complete grid that has been formatted so that the Close column is highlighted:

Top

Cell Formatting

You can also style specific cells by adding the cell-class attribute to the <zing-grid> or <zg-column> elements, like so:

<zing-grid caption="Cell Formatting">
  <zg-data data="..."></zg-data>
  <zg-colgroup>
    <zg-column index="open" type="currency" cell-class="_renderStocks"></zg-column>
    <zg-column index="high" type="currency" cell-class="_highlightHigh"></zg-column>
    <zg-column index="low" type="currency" cell-class="_highlightLow"></zg-column>
    <zg-column index="close" type="currency"></zg-column>
    <zg-column index="volume"></zg-column>
  </zg-colgroup>
</zing-grid>

Putting the attribute on the <zing-grid> tag applies the class globally, meaning that function will run for EVERY cell.

Conditionally Formatted Cells Grid

Here is a complete grid that has been formatted to highlight the highest value in the High column and the lowest value in the Low column of a dynamic grid:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: conditional formatting]