docs
Menu
Menu

Vanilla JS Example

In this article, we provide an outline of the web component (markup) version 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.

On This Page

Usage

Include the following dependencies in your HTML file:

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

Create a <zing-grid> component:

CloseCopy Copied
<zing-grid></zing-grid>

Configure your grid through attributes:

CloseCopy Copied
<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>

Use JavaScript to change your grid data every second:

CloseCopy Copied
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);
});

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

On This Page

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading