Docs

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]