Nested Grid Column Type

116 of 122
ZingGrid allows slotted content inside of columns making it easy to nest a secondary grid.
Result Full HTML CSS JS
Edit Download

Full Code

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

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></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>
    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" defer></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);
}

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