experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-caption
mode: provenance
representation: html
origin_response_id: 1bde67f0276a3f38c0c0c37c77d1ce48
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.540Z
version_nonce: 70cde6dd0376a869aab60bcdecd00faa
generated_at_utc: 2026-11-15T01:34:54.711Z
response_nonce: 02d2a3998271e4b0a667aebd9770ce7a
Demos Back to Docs

Adding a Caption

116 of 125
Add a caption by adding the caption attribute to the <zing-grid> tag.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

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

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

<body>
  <zing-grid caption="This is a caption using an attribute!" data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body>
    <zing-grid 
      caption="This is a caption using an attribute!" 
      data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'>
    </zing-grid>
	</body>
</html>
body{background:#e6e6e6;}
// No JS code

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