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:
<zing-demo type="iframe" src=""></zing-demo>

          Column Formatting
You can style columns by adding the col-class attribute to the &lt;zing-grid&gt; tag ,like so:

&lt;zing-grid col-class="_highlightClose"&gt;&lt;/zing-grid&gt;
<h3>Conditionally Formatted Columns Grid</h3>
<p>Here is a complete grid that has been formatted so that the Close column is highlighted:</p>
<p><zing-demo type="iframe" src=""></zing-demo></p>

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

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:


Related Resources

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

[features: conditional formatting]