Creating Your First Data Grid with ZingGrid

In this post, I'm going to show you how easy and quick it is to create a data grid or data table in less than five minutes using ZingGrid. Watch the video tutorial to see these steps in action, or follow along with this blog post to learn about the syntax you’ll need to get started with ZingGrid.

The three main things you'll learn how to do in this tutorial are:

Importing the ZingGrid library
Referencing the ZingGrid library
Rendering the grid

Importing the ZingGrid Library

To import the library you need to download it as a resource first, which you can do one of three ways – via the CDN link, via a package manager, or via direct download.

CDN Link

The CDN link is the quickest set-up option you can use to import the ZingGrid library.

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

Package Manager

If you'd rather use a package manager, you can run npm install zinggrid to install the library via npm.

<script type="module">
  import ZingGrid from 'ZingGrid';
</script>

Direct Download

Your third option is to download the ZingGrid library from our website or from our public GitHub repository.

<script type="module">
  import ZingGrid from './index.js';
</script>
<!-- fallback for no module support -->
<script nomodule src="./dist/zinggrid.min.js"></script>

Referencing the ZingGrid library

To use the library, you'll need to reference the script into your environment. In this example, we're using the CDN link, so we'll just add it to the <head> tag and add the defer attribute to prevent a render blocking script during page parse.

We're deferring the script because the library doesn't need to be loaded before the component is parsed. Once the script is registered, all instances of <zing-grid> on the page will automatically be instantiated.

<!DOCTYPE html>
<html>
<head>
  <!--Script Reference-->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
</head>
<body>
  <!--Grid Component-->
  <zing-grid></zing-grid>
</body>
</html>

A slightly different approach you can use is to put the <script> tag at the bottom of your document, which is effectively the same as the defer process above.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <!--Grid Component-->
  <zing-grid></zing-grid>
  <!--Script Reference-->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</body>
</html>

Rendering the Grid

Making your first grid is as simple as creating a <zing-grid> tag and adding a data attribute. The data attribute expects grid data in valid JSON format, so that's how we'll be adding our sample data to this grid.

In this example, we're also using the caption attribute to add a title to our data grid.

Here's what your markup should look like once you've added your JSON data to the data attribute:

<!DOCTYPE html>
<html>
<head>
  <!--Script Reference[1]-->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
</head>
<body>
  <!--Grid Component Placement[2]-->
  <zing-grid
    caption="Hello Futurama"
    data='[{
        "name": "Philip J. Fry",
        "origin": "Earth"
      },
      {
        "name": "Turanga Leela",
        "origin": "Earth"
      },
      {
        "name": "Bender Bending Rodriguez",
        "origin": "Earth"
      },
      {
        "name": "Amy Wong",
        "origin": "Mars"
      },
      {
        "name": "Doctor John Zoidberg",
        "origin": "Decapod 10"
      },
      {
        "name": "Lord Nibbler",
        "origin": "Earth"
      }
    ]'>
  </zing-grid>
</body>
</html>

Here's a live demo of this grid in action:

All of ZingGrid's main library features are typically attributes added to the top-level <zing-grid> tag. You can find the full list of available attributes and features in our API references docs.

And that's all you need to do to build your first grid using the ZingGrid library – thanks for your interest! Stay tuned for the next tutorial in this series, where I'll walk you through data basics in ZingGrid 🖖

Blog