Docs

Your First Grid

ZingGrid is a powerful JavaScript library for rendering interactive HTML grids and data tables. Ready to try out ZingGrid and see what it can do? In this guide, we will walk you through the necessary steps to import the ZingGrid library and render your first grid, like so:

Use the Edit button on any demo within our docs to fork it, which will open it in our integrated ZingGrid editor. Alternatively, you can use your text editor of choice to edit any demos as well.

Do you use VS Code? Check out our ZingGrid Language Server Protocol Extension for VS Code. It includes type-ahead support for all of the ZingGrid tags and CSS variables!


Prefer video tutorials? Check out our quick video guide below:

Importing the Library

There are a few options to import the ZingGrid library- via the CDN link, Node Package Manager (npm), or Direct Download.

CDN Link

For the quickest setup, copy and paste the <script> tag below into the <head> element of your HTML document.

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

The <script> tag contains the CDN link with a defer attribute so that the ZingGrid library will load after the page has finished parsing and won’t block the page from rendering.

Package Manager

To install via the Node Package Manager (npm), run npm install zinggrid in your favorite command prompt or shell. Then, you can import your installed ZingGrid library as a script module as shown below:

<script type="module">
  import 'zinggrid';
</script>

Direct Download

To direct download ZingGrid, visit our site or our public GitHub repository. Then, you can import your ZingGrid project as shown below:

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

Rendering the Grid

Now that you have imported the ZingGrid library into your environment, you can create your first grid. This is as simple as creating a <zing-grid> tag in the <body> element of your HTML document and adding attributes, like so:

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

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

Top

Moving Forward

Congrats on creating your first working grid! You should now understand the basics of importing and rendering ZingGrid. If you need more information on how to integrate this with your preferred, client-side framework, check out our integration demos:

If you do not see your framework listed above, please let us know.

Next Steps

We suggest following the "Getting Started" section of our docs in order. The next step is getting your data integrated. If you want to learn more about getting started with data in ZingGrid, read our Data Basics guide. If you're ready to hook up a remote data source, check out our Remote Data guide.

Top

[getting-started: your first grid]