experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-source-citation
mode: provenance
representation: html
origin_response_id: 0247976c0998b628fdcca23c88e0665b
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.581Z
version_nonce: 62a2885a96d5d41fd2fc4d0dcb7718eb
generated_at_utc: 2026-10-25T01:39:27.207Z
response_nonce: 8cfabb5d0e714e90a6401881676ff9e1

Citing Data Source

35 of 125
To enable the source element, you can use <zg-source>Source Text Here</zg-source> or add source="Source Text Here" to the <zing-grid> tag.
Result Full HTML CSS JS
Edit Download

Full Code

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

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 400px;
    }

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

<body class="zg-body">
  <zing-grid caption="zg-source" sort src="https://cdn.zinggrid.com/datasets/liverpool-forwards.json" source="Data gathered by hardworking ZingSoft Employees">
    <zg-colgroup>
      <zg-column index="playerImg" header=" " width="100" sort="disabled" type="image" type-image-mask="circle" type-image-alt="Player Img N/A"></zg-column>
      <zg-column index="firstName, lastName" header="Name">
        <template>
          [[index.firstName]] [[index.lastName]]
        </template>
      </zg-column>
      <zg-column index="number"></zg-column>
      <zg-column index="position" sort="disabled"></zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid
      caption="zg-source"
      sort
      src="https://cdn.zinggrid.com/datasets/liverpool-forwards.json"
      source="Data gathered by hardworking ZingSoft Employees">
      <zg-colgroup>
        <zg-column 
        	index="playerImg"
          header=" "
          width="100"
          sort="disabled"
          type="image"
          type-image-mask="circle"
          type-image-alt="Player Img N/A"></zg-column>
        <zg-column index="firstName, lastName" header="Name">
        	<template>
          	[[index.firstName]] [[index.lastName]]
          </template>
        </zg-column>
        <zg-column index="number"></zg-column>
        <zg-column index="position" sort="disabled"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}

zing-grid[loading] { height:400px; }
// No JS code

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