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.

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

Column Formatting

You can style columns by adding the col-class attribute to the <zing-grid> tag.

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

Cell Formatting

You can put the cell-class attribute on the <zing-grid> or <zg-column> elements.

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