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.

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.

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading