Conditionality in 60 Seconds

By the ZingGrid Team

This post is the first in the “Functionality in Under 60 Seconds” blog series. These walkthroughs are meant to highlight how easy it is to add interactivity and functionality to ZingGrid data grids and tables.

Conditional Rendering of cells

Watch the short video below to see how easy it is to add conditionality to ZingGrid, or scroll further to read a short summary covering the basics.

Creating conditional rendering of cells

The first thing you’ll want to do is follow this checklist to make sure you’ve set up ZingGrid properly in preparation for implementing this feature.

1. Make sure your grid has data
2. CSS class name(s) and styles ready for your custom cells
3. A Javascript function to render CSS class name strings

Conditionality Overview

The main purpose of conditional formatting is to render CSS class names to cells dynamically. In return, you can style cells individually based on a value or some other condition you determine in your JavaScript function. There are three very important steps for conditionality inside of ZingGrid:

1. User-defined columns with the zg-column tag
2. cell-class attribute to trigger conditional rendering function
3. ZingGrid.registerMethod() method registration for your conditional rendering function

User-Defined Columns

The first step — after having a dataset ready — is defining your columns explicitly. Explicit column definitions will allow for more functionality per column. If you don’t define columns explicitly, ZingGrid will render your dataset as text.

<zg-colgroup>    
  <zg-column index="open" type="currency" cell-class="_renderOpenValue"></zg-column>    
  <zg-column index="high" type="currency"></zg-column>    
  <zg-column index="low" type="currency"></zg-column>    
  <zg-column index="close" type="currency"></zg-column>    
  <zg-column index="volume" type="number"></zg-column>
</zg-colgroup>

CSS Classes on Cells

Defining the cell-class attribute is what will call your JavaScript function. If ZingGrid does not find your function at the window level, it will render the cell-class value as a static CSS class. You can define this attribute in two places:

1. The global namespace on the zing-grid tag
2. The specific namespace on the zg-column tag

If you define the cell-class attribute on both zing-gridandzg-column, the class on zg-columnwill take precedence. In the following example, all cells will have class “red” except the one defined to be “blue”.

<zing-grid cell-class=”red”>
  <zg-colgroup>
    <zg-column index=”open” type=”currency” cell-class=”blue”>
 
    <zg-column index=”high” type=”currency”></zg-column>
    <zg-column index=”low” type=”currency”></zg-column>
    <zg-column index=”close” type=”currency”></zg-column>
    <zg-column index=”volume” type=”number”></zg-column></zg-column>     
  </zg-colgroup>
</zing-grid>

Function Registration

Registering functions to ZingGrid is very important. At the framework level, this is 100% necessary. In vanilla JavaScript, you can get away with function declarations because they are hoisted to the top of their scope.

The following function will apply the “increased” CSS cell class if the open value is greater than the close value on that row. Otherwise, it will apply “decreased” as the default return value.

function _renderOpenValue(openValue, cellDOMRef, cellRef) {
 if (openValue > cellRef.record.close) return ‘increased’; 
 
 return ‘decreased’;
}
// register method in the order of (value, name, scope)
ZingGrid.registerMethod(_renderOpenValue, ‘_renderOpenValue’, this);

NOTE: You can read all about registering methods in ZingGrid here.

Those are the basics of implementing conditional formatting in your ZingGrid data tables & grids. You can play with this demo in our playground here.

Built using web components, ZingGrid is a fully-featured, native JavaScript data grid and table solution for the web. With out-of-the-box CRUD capability and ease of use via custom DOM elements, ZingGrid introduces a new way to visualize data using JS grids.