docs
Menu
Menu

Your First Grid

This guide is meant to be quick and take no longer than a couple minutes. You'll learn how to download, import and render your first ZingGrid. Let's get started!

Example

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.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Importing the Library

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

CDN Link

For the quickest setup, use the CDN link to import the library.

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

Package Manager

Alternatively, you can run npm install zinggrid to install via npm.

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

Direct Download

The third option is to download ZingGrid from our site or our public GitHub respository.

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

Referencing the Library

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

We defer the script since 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.

CloseCopy Copied
<!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>

Alternatively, you can put the <script> tag at the bottom of the document, which is effectively the same as the defer process above.

CloseCopy Copied
<!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.

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.

CloseCopy Copied
<!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>

Moving Forward

Congrats on your first working grid! You should now understand the basics of 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 docs. If you're ready to hook up a remote data source, check out our Remote Data docs.

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading