Nested Grid Column Type

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-html,
    .zg-body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    zing-grid[loading] {
      height: 450px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="Fortune 500 Companies">
    <zg-data data='[
        {
          "company": "Walmart",
          "stockPrice": 84.54,
          "quarterlySales": [123.18, 136.27, null, null],
          "priceSuffix": "Billions"
        },
        {
          "company": "Berkshire Hathaway",
          "stockPrice": 298300,
          "quarterlySales": [133.18, 136.27, null, null],
          "priceSuffix": "Billions"
        },
        {
          "company": "Apple",
          "stockPrice": 184.22,
          "quarterlySales": [153.68, 116.62, null, null],
          "priceSuffix": "Billions"
        },
        {
          "company": "Exxon Mobil",
          "stockPrice": 84.54,
          "quarterlySales": [123.18, 136.27, null, null],
          "priceSuffix": "Billions"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="company"></zg-column>
      <zg-column index="stockPrice" type="currency"></zg-column>
      <zg-column index="quarterlySales" renderer="_renderInnerGrid" width="70%">
        <template>
          <zing-grid caption="[[record.company]] 2018 Sales in 
              [[record.priceSuffix]]">
            <zg-colgroup>
              <zg-column index="q1"></zg-column>
              <zg-column index="q2"></zg-column>
              <zg-column index="q3"></zg-column>
              <zg-column index="q4"></zg-column>
            </zg-colgroup>
          </zing-grid>
        </template>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);

    function _renderInnerGrid(quarterlySales, cellRef, $cell) {
      let data = [{
        q1: quarterlySales[0],
        q2: quarterlySales[1],
        q3: quarterlySales[2] || 'N/A',
        q4: quarterlySales[3] || 'N/A',
      }];
      cellRef.querySelector('zing-grid').setData(data);
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body class="zg-body">
  <zing-grid caption="Fortune 500 Companies">
    <zg-data data='[
        {
          "company": "Walmart",
          "stockPrice": 84.54,
          "quarterlySales": [123.18, 136.27, null, null],
          "priceSuffix": "Billions"
        },
        {
          "company": "Berkshire Hathaway",
          "stockPrice": 298300,
          "quarterlySales": [133.18, 136.27, null, null],
          "priceSuffix": "Billions"
        },
        {
          "company": "Apple",
          "stockPrice": 184.22,
          "quarterlySales": [153.68, 116.62, null, null],
          "priceSuffix": "Billions"
        },
        {
          "company": "Exxon Mobil",
          "stockPrice": 84.54,
          "quarterlySales": [123.18, 136.27, null, null],
          "priceSuffix": "Billions"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="company"></zg-column>
      <zg-column index="stockPrice" type="currency"></zg-column>
      <zg-column index="quarterlySales" renderer="_renderInnerGrid" width="70%">
        <template>
          <zing-grid caption="[[record.company]] 2018 Sales in 
              [[record.priceSuffix]]">
            <zg-colgroup>
              <zg-column index="q1"></zg-column>
              <zg-column index="q2"></zg-column>
              <zg-column index="q3"></zg-column>
              <zg-column index="q4"></zg-column>
            </zg-colgroup>
          </zing-grid>
        </template>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
</body>

</html>

.zg-html,
.zg-body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

function _renderInnerGrid(quarterlySales, cellRef, $cell) {
  let data = [{
    q1: quarterlySales[0],
    q2: quarterlySales[1],
    q3: quarterlySales[2] || 'N/A',
    q4: quarterlySales[3] || 'N/A',
  }];
  cellRef.querySelector('zing-grid').setData(data);
}