Download

Step 1: Get ZingGrid

Install using our CDN

Copy the code below before your </body> tag

<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>

Note: Our CDN service is intended as an introductory convenience tool. We strongly recommend either downloading ZingGrid to your environment, or accessing it via NPM.

Install using

NPM Logo
Install via NPM

npm install zinggrid

Install using Direct Download

Step 2: Make your first grid

Tag Style <>

                    <!DOCTYPE html>
<html>
<head>
  <!-- Script Reference[1] -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>
<body>
  <!-- Grid Component Placement[2] -->
  <zing-grid
    caption="Hello-world"
    data='[...]'
  ></zing-grid>
</body>
</html>
                

Notes

  1. Script Reference - The main ZingGrid script reference includes the vast majority of our grid features. A few of our advanced features can be taken out through a custom build and dependencing on browser you are using you can access different size builds. These size differences are due to polyfills on a per browser basis.
  2. Grid Object Placement - The template starts you off with a single grid. To add a second (or more) grid, see our Adding Additional grids page.

Object Style {...}

                    <!DOCTYPE html>
<html>
<head>
  <!-- Script Reference[1] -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>
<body>
  <!-- Grid Component Placement[2] -->
  <div id="myFirstGrid"></div>
  <script>
    const gridConfig = {
      caption: 'Hello-world',
      data: [...]
    };
    let zingGridRef = new ZingGrid('myFirstGrid', gridConfig);
  </script>
</body>
</html>
                  

Notes

  1. Script Reference - The main ZingGrid script reference includes the vast majority of our grid features. A few of our advanced features can be taken out through a custom build and dependencing on browser you are using you can access different size builds. These size differences are due to polyfills on a per browser basis.
  2. Grid Object Placement - The template starts you off with a single grid. To add a second (or more) grid, see our Adding Additional grids page.
  3. new ZingGrid(...) Method - This is where your grid is rendered with its corresponding data. The element id myFirstGrid and config gridConfig are specified here.

Tag Style <>

                    <!DOCTYPE html>
<html>
<head>
  <!-- Script Reference[1] -->
  <script src="path/to/package/manager/zinggrid.min.js"></script>
</head>
<body>
  <!-- Grid Component Placement[2] -->
  <zing-grid
    caption="Hello-world"
    data='[...]'
  ></zing-grid>
</body>
</html>
                

Notes

  1. Script Reference - The main ZingGrid script reference includes the vast majority of our grid features. A few of our advanced features can be taken out through a custom build and dependencing on browser you are using you can access different size builds. These size differences are due to polyfills on a per browser basis.
  2. Grid Object Placement - The template starts you off with a single grid. To add a second (or more) grid, see our Adding Additional grids page.

Object Style {...}

                    <!DOCTYPE html>
<html>
<body>
  <!-- Grid Component Placement[2] -->
  <div id="myFirstGrid"></div>
  <!-- Script Reference[1] -->
  <script>
    import ZingGrid from 'zinggrid';
    const gridConfig = {
      caption: 'Hello World', 
      data: [...]
    };
    let zingGridRef = new ZingGrid('myFirstGrid', gridConfig);
  </script>
</body>
</html>
                  

Notes

  1. Script Reference - The main ZingGrid script reference includes the vast majority of our grid features. A few of our advanced features can be taken out through a custom build and dependencing on browser you are using you can access different size builds. These size differences are due to polyfills on a per browser basis.
  2. Grid Object Placement - The template starts you off with a single grid. To add a second (or more) grid, see our Adding Additional grids page.
  3. new ZingGrid(...) Method - This is where your grid is rendered with its corresponding data. The element id myFirstGrid and config gridConfig are specified here.

Tag Style <>

                    <!DOCTYPE html>
<html>
<head>
  <!-- Script Reference[1] -->
  <script src="path/to/zinggrid.min.js"></script>
</head>
<body>
  <!-- Grid Component Placement[2] -->
  <zing-grid
    caption="Hello-world"
    data='[...]'
  ></zing-grid>
</body>
</html>
                

Notes

  1. Script Reference - The main ZingGrid script reference includes the vast majority of our grid features. A few of our advanced features can be taken out through a custom build and dependencing on browser you are using you can access different size builds. These size differences are due to polyfills on a per browser basis.
  2. Grid Object Placement - The template starts you off with a single grid. To add a second (or more) grid, see our Adding Additional grids page.

Object Style {...}

                    <!DOCTYPE html>
<html>
<head>
  <!-- Script Reference[1] -->
  <script src="path/to/zinggrid.min.js"></script>
</head>
<body>
  <!-- Grid Component Placement[2] -->
  <div id="myFirstGrid"></div>
  <script>
    const gridConfig = {
      caption: 'Hello-world',
      data: [...]
    };
    let zingGridRef = new ZingGrid('myFirstGrid', gridConfig);
  </script>
</body>
</html>
                  

Notes

  1. Script Reference - The main ZingGrid script reference includes the vast majority of our grid features. A few of our advanced features can be taken out through a custom build and dependencing on browser you are using you can access different size builds. These size differences are due to polyfills on a per browser basis.
  2. Grid Object Placement - The template starts you off with a single grid. To add a second (or more) grid, see our Adding Additional grids page.
  3. new ZingGrid(...) Method - This is where your grid is rendered with its corresponding data. The element id myFirstGrid and config gridConfig are specified here.

Step 3: Going Further

ZingGrid's declarative syntax makes it easy to create your first grid in seconds.

Join the community

  • Free themes, templates & resources
  • Manage your demos in one place
  • Additional support options