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>

Copy to clipboardCopied! Error Copying Text

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

Install via NPM

npm install zinggrid

Install using Direct Download

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

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 depending on what browser you are using, you can access different size builds. These size differences are due to polyfills on a per browser basis.
Grid Object Placement - The template starts you off with a single grid. To add a second grid (or more), 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

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 depending on browser you are using you can access different size builds. These size differences are due to polyfills on a per browser basis.
Grid Object Placement - The template starts you off with a single grid. To add a second grid (or more), see our Adding Additional grids page.
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

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.
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

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.
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.
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

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.
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

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.
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.
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.

What's next?

Resources

Join the community

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