docs
Menu
Menu

Your First Grid

Let's get started. We are going to make this:

You'll learn how to download, import, and render ZingGrid.

On This Page

` You can use your own text editor, or you can execute the following steps in this tutorial using our integrated ZingGrid editor.

Using the Library

Using ZingGrid is simple – you have three options:

CDN Link
Package Manager
Direct Download

For the easiest setup, we'll use the CDN link for our demo:

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

You can find more information about our download methods here.

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 using the defer attribute.

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>

We defer the script since <zing-grid> doesn't need it loaded before the component is parsed. This saves you a blocking script during page load.

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>

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

Rendering the Grid

Making your first grid is as simple as creating a <zing-grid> tag and adding a data attribute.

Sample Markup

CloseCopy Copied
<zing-grid
  caption="Hello Futurama"
  data='[
    { "firstName": "Philip", "lastName": "Fry"},
    { "firstName": "Turanga", "lastName": "Leela"},
    { "firstName": "Bender", "lastName": "Rodriguez"},
    { "firstName": "Amy", "lastName": "Wong"}
  ]'>
</zing-grid>

The [data] attribute expects grid data in valid JSON format.

Full Markup

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='[
      { "firstName": "Philip", "lastName": "Fry"},
      { "firstName": "Turanga", "lastName": "Leela"},
      { "firstName": "Bender", "lastName": "Rodriguez"},
      { "firstName": "Amy", "lastName": "Wong"}
    ]'>
  </zing-grid>
</body>
</html>

Moving Forward

Congrats on your working grid! You now have the basics to be able to integrate this into your application. 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

To add grid features and functionality, we suggest following the rest of the getting started guide. It is meant to be quick and take no longer than a couple minutes. You'll learn the basic data-types, grid styling, and how to enable the built-in features like pagination or sorting.

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading