experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/vanilla-js
mode: provenance
representation: html
origin_response_id: 8fe4a387992a6bf1e9a5ac18767b86e7
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.733Z
version_nonce: 18323ff45552440f7e37ec9004ad3122
generated_at_utc: 2026-11-08T02:52:56.306Z
response_nonce: 8f7b2475fe57bae5ef6dfef97ba61f9b
Docs Version 1

Vanilla JS

ZingGrid has full functionality when using Vanilla JavaScript with no additional frameworks! In this guide, we provide an outline of the web component (markup) implementation of the library and how to manipulate that markup with Vanilla JavaScript. We will be building up to a grid that changes data at a set interval.

Usage

  1. Include the following dependencies in your HTML file, like so:

    <html>
  <head>
    <script src="path/to/zinggrid.min.js" defer></script>
  </head>
</html>

  2. Create a <zing-grid> component:

    <zing-grid></zing-grid>

  3. Configure your grid through attributes within <zing-grid>. In this example, we'll add the id, theme, caption, data attributes:

    <zing-grid
  id="example-grid"
  data='[
    {
      "firstName": "John",
      "lastName": "Doe",
      "age": 45
    },
    {
      "firstName": "Jane",
      "lastName": "Doe",
      "age": 44
    },
  ]'
  theme="default"
  caption="Meet the Doe Family">
</zing-grid>

  4. Use JavaScript to change your grid data every second:

    const zingGridRef = document.querySelector('#example-grid');
zingGridRef.executeOnLoad(function() {
  setInterval(function() {
    const newData = [
      {
        firstName: 'John Jr.',
        lastName: 'Doe',
        age: Math.floor(15 * Math.random())
      },
      {
        firstName: 'Jane Jr.',
        lastName: 'Doe',
        age: Math.floor(13 * Math.random())
      }
    ];
    zingGridRef.setAttribute('data', JSON.stringify(newData));
  }, 1000);
});

Vanilla JS Grid with Changing Data

Here is our completed grid which changes the data it displays every second:

Top

[integrations: vanilla JS]