Conditionally Rendered Cells
You can put the
cell-class attribute on the <zing-grid> or <zg-column> elements.
Result
Full
HTML
CSS
JS
Edit
Download
Full Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> .increased { color: #66bb6a; } .increased::before { content: '↑'; } .decreased { color: #ef5350; } .decreased::before { content: '↓'; } .highlight { background: #fff59d; } zing-grid[loading] { height: 373px; } </style> </head> <body> <zing-grid caption="Cell Formatting"> <zg-data data='[ { "open": "114.1900", "high": "114.4950", "low": "113.6800", "close": "114.2750", "volume": "7120112" }, { "open": "113.0300", "high": "114.9000", "low": "112.2175", "close": "114.6700", "volume": "27334460" }, { "open": "113.0500", "high": "113.3200", "low": "111.0350", "close": "111.7000", "volume": "21728429" }, { "open": "112.1900", "high": "113.6950", "low": "111.7200", "close": "113.2100", "volume": "22170934" }, { "open": "113.6900", "high": "113.7000", "low": "111.8600", "close": "112.1400", "volume": "20736516" } ]'></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> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // global vars for highlight min/max values var gHigh = -1; var gLow = Number.MAX_SAFE_INTEGER; // determine if we should render positive/negative // cell styling based on opening stock price vs when it last // closed function _renderStocks(open, cellDOMRef, cellRef) { console.log(`open value: ${open} - record info ${JSON.stringify(cellRef.record)}`); // if open is higher than close value if (open > cellRef.record.close) return 'stock-open increased'; return 'stock-open decreased'; } // highlight cell with highest value in high column function _highlightHigh(high, cellDOMRef, cellRef) { if (high == Number(gHigh)) return 'highlight'; } // highlight cell with lowest value in low column function _highlightLow(low, cellDOMRef, cellRef) { if (low == Number(gLow)) return 'highlight'; } // window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content // save reference to the grid const zgRef = document.querySelector('zing-grid'); // interval mimics real time data updates setInterval(() => { // regenerate the same starting dataset everytime to // produce better visual results let realTimeData = [{ open: 114.1900, high: 114.4950, low: 113.6800, close: 114.2750, volume: 7120112 }, { open: 113.0300, high: 114.9000, low: 112.2175, close: 114.6700, volume: 27334460 }, { open: 113.0500, high: 113.3200, low: 111.0350, close: 111.7000, volume: 21728429 }, { open: 112.1900, high: 113.6950, low: 111.7200, close: 113.2100, volume: 22170934 }, { open: 113.6900, high: 113.7000, low: 111.8600, close: 112.1400, volume: 20736516 }]; // reset global vars for highlighint min/max cells gHigh = -1; gLow = Number.MAX_SAFE_INTEGER; // update data to mimic realtime updates realTimeData.map(values => { // randomly choose to. inc/dec values to // simulate stock exchanges if (Math.round(Math.random())) { values.open = (values.open - 1); values.high = (values.high - 1); values.low = (values.low - 1); values.close = (values.close + 1); values.volume = (values.volume - 100); } else { values.open = (values.open + Math.floor(Math.random() * 5)); values.high = (values.high + 1); values.low = (values.low + 1); values.close = (values.close - 1); values.volume = (values.volume + 100); } // set new global high/low values if (values.high >= gHigh) gHigh = values.high; if (values.low <= gLow) gLow = values.low; return values; }); // assign data to grid if (zgRef) zgRef.setData(realTimeData); }, 1000); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body> <zing-grid caption="Cell Formatting"> <zg-data data='[ { "open": "114.1900", "high": "114.4950", "low": "113.6800", "close": "114.2750", "volume": "7120112" }, { "open": "113.0300", "high": "114.9000", "low": "112.2175", "close": "114.6700", "volume": "27334460" }, { "open": "113.0500", "high": "113.3200", "low": "111.0350", "close": "111.7000", "volume": "21728429" }, { "open": "112.1900", "high": "113.6950", "low": "111.7200", "close": "113.2100", "volume": "22170934" }, { "open": "113.6900", "high": "113.7000", "low": "111.8600", "close": "112.1400", "volume": "20736516" } ]'></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> </body> </html>
.increased { color:#66bb6a; } .increased::before { content:'↑'; } .decreased { color:#ef5350; } .decreased::before { content:'↓'; } .highlight { background:#fff59d ; }
// global vars for highlight min/max values var gHigh = -1; var gLow = Number.MAX_SAFE_INTEGER; // determine if we should render positive/negative // cell styling based on opening stock price vs when it last // closed function _renderStocks(open, cellDOMRef, cellRef) { console.log(`open value: ${open} - record info ${JSON.stringify(cellRef.record)}`); // if open is higher than close value if (open > cellRef.record.close) return 'stock-open increased'; return 'stock-open decreased'; } // highlight cell with highest value in high column function _highlightHigh(high, cellDOMRef, cellRef) { if (high == Number(gHigh)) return 'highlight'; } // highlight cell with lowest value in low column function _highlightLow(low, cellDOMRef, cellRef) { if (low == Number(gLow)) return 'highlight'; } // window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content // save reference to the grid const zgRef = document.querySelector('zing-grid'); // interval mimics real time data updates setInterval(() => { // regenerate the same starting dataset everytime to // produce better visual results let realTimeData = [ { open: 114.1900, high: 114.4950, low: 113.6800, close: 114.2750, volume: 7120112 }, { open: 113.0300, high: 114.9000, low: 112.2175, close: 114.6700, volume: 27334460 }, { open: 113.0500, high: 113.3200, low: 111.0350, close: 111.7000, volume: 21728429 }, { open: 112.1900, high: 113.6950, low: 111.7200, close: 113.2100, volume: 22170934 }, { open: 113.6900, high: 113.7000, low: 111.8600, close: 112.1400, volume: 20736516 } ]; // reset global vars for highlighint min/max cells gHigh = -1; gLow = Number.MAX_SAFE_INTEGER; // update data to mimic realtime updates realTimeData.map(values => { // randomly choose to. inc/dec values to // simulate stock exchanges if (Math.round(Math.random())) { values.open = (values.open - 1); values.high = (values.high - 1); values.low = (values.low - 1); values.close = (values.close + 1); values.volume = (values.volume - 100); } else { values.open = (values.open + Math.floor(Math.random() * 5)); values.high = (values.high + 1); values.low = (values.low + 1); values.close = (values.close - 1); values.volume = (values.volume + 100); } // set new global high/low values if (values.high >= gHigh) gHigh = values.high; if (values.low <= gLow) gLow = values.low; return values; }); // assign data to grid if (zgRef) zgRef.setData(realTimeData); }, 1000); });
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!