Build Responsive, Interactive JavaScript Data Grids & Tables with Minimal Set-Up

ZingGrid gives you tons of built-in functionality right out of the box so you can visualize your datasets as grids and tables in no time.

Scrolling GIF of 2019 Tech Conferences ZingGrid demo

Easy integration withyour

development stack
development stackdata sources

Angular - Hello ZingGrid

Include the following dependencies into the header of your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Import Angular component:

CloseCopy Copied
import { Component } = '@angular/core';

Create a ZingGrid component:

CloseCopy Copied
@Component({
  selector: 'my-component',
  template: '<zing-grid caption="Hello World"></zing-grid>',
})
class MyComponent {
  datastore = [
    { "breed": "Chow Chow", "name": "Butter"},
    { "breed": "Dachshund", "name": "Sousage"},
    { "breed": "Pug", "name": "Potat"},
    { "breed": "Corgi", "name": "Plop"},
    { "breed": "Pomeranian", "name": "Floof"}
  ];
}

Display your new component:

CloseCopy Copied
<my-component></my-component>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Firebase - Hello ZingGrid

Include the following dependencies into the header of your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Get the path to your data in Firebase
In our example, we have "https://zinggrid-examples.firebaseio.com/dogs", which stores:

CloseCopy Copied
[
  {
    "breed" : "Dachshund",
    "name" : "Sousage"
  },
  {
    "breed" : "Corgi",
    "name" : "Plop"
  },
  {
    "breed" : "Pomeranian",
    "name" : "Floof"
  }
]

Create a <zing-grid> component and set the source equal to that path

CloseCopy Copied
<zing-grid src="https://zinggrid-examples.firebaseio.com/dogs" caption="Hello Doggos"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

jQuery - Hello ZingGrid

Include the following dependencies into the header of your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Create a zing-grid component:

CloseCopy Copied
<zing-grid id="myGrid" caption="Hello Doggos"></zing-grid>

You can use jQuery to change to set your data

CloseCopy Copied
$(document).ready(function() {
  const $gridRef = $('#myGrid');
  let datastore = [
    { "breed": "Dachshund", "name": "Sousage"},
    { "breed": "Corgi", "name": "Plop"},
    { "breed": "Pomeranian", "name": "Floof"}
  ];
  $gridRef.attr('data', JSON.stringify(datastore));
});
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

MongoDB - Hello ZingGrid

Include the following dependencies into the header of your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Example data stored in MongoDB:

CloseCopy Copied
{ "breed": "Dachshund", "name": "Sousage"},
{ "breed": "Corgi", "name": "Plop"},
{ "breed": "Pomeranian", "name": "Floof"}

Connect to MongoDB and get data from your database (we used Node/Express)

CloseCopy Copied
var MongoClient = require('mongodb').MongoClient; // including node modules
var express = require('express');
var app = express();

MongoClient.connect('mongodb://localhost:27017', function(err, client) { // connecting to db
  db = client.db('mydb');
});

app.get('/mydb', function(req, res) { // defining route
    db.collection('dogs').find({}).toArray(function(err, docs) { // getting dogs collection
        res.send(docs);
    });
})

Create a <zing-grid> tag and set its source to the route we created

CloseCopy Copied
<zing-grid src="http://localhost:3000/mydb" caption="Hello Doggos"></zing-grid>
MySQL

MySQL - Hello ZingGrid

Include the following dependencies into the header of your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Our Example Database:

CloseCopy Copied
mysql> SELECT * FROM dogs;
+------------+---------+
| breed      | name    |
+------------+---------+
| Dachshund  | Sousage |
| Corgi      | Plop    |
| Pomeranian | Floof   |
+------------+---------+

Connect to MySQL and get data from your database

CloseCopy Copied
<script>
  <?php
    $mydata = [];
    $mysqli = new mysqli("localhost", "user", "password", "mydb", 3306);
    ...

    if ($result = $mysqli->query("SELECT * FROM dogs")) {
      $mydata = $result->fetch_all(MYSQLI_ASSOC);
      $result->close();
    }
  ?>

  var dataValues = <?php echo json_encode($mydata) ?>;
</script>

Create a <zing-grid> tag and set its data

CloseCopy Copied
<script>
  window.onload = function() {
    document.querySelector('zing-grid').data = dataValues;
  }
</script>
<zing-grid caption="Hello Doggos"></zing-grid>

Polymer - Hello ZingGrid

Include the following dependencies into the header of your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Import Polymer element:

CloseCopy Copied
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'

Create a ZingGrid component:

CloseCopy Copied
class MyComponent extends PolymerElement {
  static get properties() {
    return {
      datastore: {
        value: [
          { "breed": "Dachshund", "name": "Sousage"},
          { "breed": "Corgi", "name": "Plop"},
          { "breed": "Pomeranian", "name": "Floof"}
        ]
      }
    }
  }
  static get template() {
    return html`<zing-grid caption="Hello Doggo" data$=""></zing-grid>`
  }
}
customElements.define('my-component', MyComponent);

Display your new component:

CloseCopy Copied
<my-component></my-component>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

React - Hello ZingGrid

Usage

Include the following dependencies in the header of your index.html file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

OR

Download ZingGrid from npm using npm i zinggrid and import that package to your App.js file or component file.

CloseCopy Copied
import React, { Component } from 'react';
// optional ZingGrid npm import header
import ZingGrid from 'zinggrid';

Put <zing-grid> tag inside your render() function.

CloseCopy Copied
<zing-grid id="helloWorld" caption="Hello Doggos" data={JSON.stringify(this.state.dogs)} loading></zing-grid>

Initialize data in componentDidMount() function.

CloseCopy Copied
// initialize data to grid
componentDidMount() {
  // set state and reflect that change through attribute mutation
  this.setState(() => {
    return {
      "dogs": [
        {
          "breed": "Dachshund",
          "name": "Sousage"
        },
        {
          "breed": "Corgi",
          "name": "Plop"
        },
        {
          "breed": "Pomeranian",
          "name": "Floof"
        }
      ]
    }
  });

  // Alternatively you can use ZingGrid api to setdata if you do
  // not want a string form of data in the DOM tied to an attribute
  this.$.helloWorld.setData(this.state.dogs);
}

Example

REST - Hello ZingGrid

Include the following dependencies into your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Get the URL of your data from a REST API
In our example, we created our own REST API using json-server. The data we want is at "http://localhost:3000/dogs/", which stores:

CloseCopy Copied
[
  {
    "breed" : "Dachshund",
    "name" : "Sousage",
    "id": 1
  },
  {
    "breed" : "Corgi",
    "name" : "Plop",
    "id": 2
  },
  {
    "breed" : "Pomeranian",
    "name" : "Floof",
    "id": 3
  }
]

Create a <zing-grid> component and set the source equal to that path

CloseCopy Copied
<zing-grid src="http://localhost:3000/dogs/"></zing-grid>

Vanilla JS - Hello ZingGrid

Include the following dependencies into your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Create a zing-grid component

CloseCopy Copied
<zing-grid></zing-grid>

Configure your grid through attributes

CloseCopy Copied
<zing-grid
  id="example-grid"
  data='[
    {
      "firstName": "John",
      "lastName": "Doe",
      "age": 45
    },
    {
      "firstName": "Jane",
      "lastName": "Doe",
      "age": 44
    },
  ]'
  theme="default"
  caption="Meet the Doe Family">
</zing-grid>

Use Javascript to change your grid data

CloseCopy Copied
const zingGridRef = document.querySelector('#example-grid');
const newData = [
  {
    "firstName": "John Jr.",
    "lastName": "Doe",
    "age": 15
  },
  {
    "firstName": "Jane Jr.",
    "lastName": "Doe",
    "age": 13
  }
];
zingGridRef.setAttribute('data', JSON.stringify(newData));
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Vue - Hello ZingGrid

Include the following dependencies in the header of your index.html file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

OR

Download ZingGrid from npm using npm i zinggrid and import that package to your main.js file or .vue component file.

CloseCopy Copied
// optional ZingGrid npm import header
import ZingGrid from 'zinggrid';

Put <zing-grid> tag inside your render() function.

CloseCopy Copied
<zing-grid ref="helloWorld" caption="Hello Doggos" :data="stringData" loading></zing-grid>

Initialize data in mounted() function.

CloseCopy Copied
data() {
  return {
    // model for datastore
    datastore: [
      {
        "breed": "Dachshund",
        "name": "Sousage"
      },
      {
        "breed": "Corgi",
        "name": "Plop"
      },
      {
        "breed": "Pomeranian",
        "name": "Floof"
      }
    ],
    // assign stringified data
    stringData: null,
  };
},

// initialize grid data on mount
mounted() {
  // set state and reflect that change through attribute mutation
  this.stringData = JSON.stringify(this.datastore);

  // Alternatively you can use ZingGrid api to setdata if you do
  // not want a string form of data in the DOM tied to an attribute
  // this.$refs.helloWorld.setData(this.datastore);
}

Example

More than responsive, mobile by design

[[index.twitter]]
CEO N/A

[[record.name]]

CompanyLogoTwitter
[[record.company]]Logo N/A
CEO N/A

[[record.name]]

[[record.description]]

CompanyLogoTwitter
[[record.company]]Logo N/A
  • PWA Friendly
  • RAIL-Level Speed
  • Server-Side Render Capable
  • Touch Support

ZingGrid & ZingChart clients

We work with a variety of clientele, from startups to established companies.

We would like to work with you too.

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading