Demos Back to Docs

Unordered List Column Type

6 of 124
ZingGrid allows slotted content inside of columns to make it easy to nest array data as a list.
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;
    }

    .zg-body h2 {
      margin: 1rem 0;
    }

    zing-grid[loading] {
      height: 673px;
    }
  </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">
        <template>
          <h2>[[record.company]] 2018 Sales in [[record.priceSuffix]]</h2>
          <ul>
            <li>q1: [[index.quarterlySales.0]]</li>
            <li>q2: [[index.quarterlySales.1]]</li>
            <li>q3: [[index.quarterlySales.2]]</li>
            <li>q4: [[index.quarterlySales.3]]</li>
          </ul>
        </template>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // 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
    });
  </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">
          <template>
            <h2>[[record.company]] 2018 Sales in [[record.priceSuffix]]</h2>
            <ul>
              <li>q1: [[index.quarterlySales.0]]</li>
              <li>q2: [[index.quarterlySales.1]]</li>
              <li>q3: [[index.quarterlySales.2]]</li>
              <li>q4: [[index.quarterlySales.3]]</li>
            </ul>
          </template>
        </zg-column>
		  </zg-colgroup>
		</zing-grid>
	</body>
</html>
.zg-html, .zg-body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

.zg-body h2 {
  margin: 1rem 0;
}
// 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
});

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