---
title: "Conditional Formatting | Feature"
description: "ZingGrid has conditional formatting for cells so you can render different content based on a value. This includes conditional formatting for rows, column, and cells."
url: https://www.zinggrid.com/docs/features/conditional-formatting
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/conditional-formatting.md
mode: provenance
representation: markdown
origin_response_id: 702fc65c8d8362c71ca362e3b82255cf
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.679Z
version_nonce: 8163096672dc7519933e9bc190a9275e
generated_at_utc: 2026-11-05T18:34:03.050Z
response_nonce: 4dceefa0c1aeb0a030c03e511149ff6a
```

# 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:

```html
<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:

[Example code](https://app.zingsoft.com/demos/embed/F5CXNRA7)

## Column Formatting

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

```html
<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:

[Example code](https://app.zingsoft.com/demos/embed/IZD20M95)

## Cell Formatting

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

```html
<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>
```

> **Note:** 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:

[Example code](https://app.zingsoft.com/demos/embed/5IDFSER6)

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

* [Data Types Documentation](https://www.zinggrid.com/docs/data-types)