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.
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.
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.
- Make sure your grid has data
- CSS class name(s) and styles ready for your custom cells
- 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:
- User-defined columns with the
zg-column
tag cell-class
attribute to trigger conditional rendering functionZingGrid.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:
- The global namespace on the
zing-grid
tag - The specific namespace on the
zg-column
tag
If you define the cell-class
attribute on both zing-grid
andzg-column
, the class on zg-column
will 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.