Conditional Rendering Cells

90 of 116
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 src="https://cdn.zinggrid.com/zinggrid.min.js" defer></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>
    // 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" defer></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!

Edit in Studio

Demo Gallery