Demos Back to Docs

Nested Grid Column Type

118 of 124
ZingGrid allows slotted content inside of columns so that it is 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 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);
}

Related Docs

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

Related Docs

Demo Gallery