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.

Note: For older 1.x version, click here.

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