default

ZingGrid makes moderngridseasy

[[index.twitter]]
 
CEO N/A

[[record.name]]

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

[[record.name]]

[[record.description]]

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

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

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

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

Import React and React Component into your JS file:

CloseCopy Copied
import React, { Component } from 'react';

Create a ZingGrid component:

CloseCopy Copied
class ZingGrid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dogs: []
    }
  }

  componentDidMount() {
    this.setState(() => {
      return {
        "dogs": [
          {
            "breed": "Dachshund",
            "name": "Sousage"
          },
          {
            "breed": "Corgi",
            "name": "Plop"
          },
          {
            "breed": "Pomeranian",
            "name": "Floof"
          }
        ]
      }
    });
  }

  render() {
    return (
      <zing-grid caption="Hello Doggos" data={JSON.stringify(this.state.dogs)}></zing-grid>
    );
  }
}

Export the component as default:

CloseCopy Copied
export default ZingGrid;
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

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 into the header of your HTML file:

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

Create a grid component

CloseCopy Copied
Vue.component('my-component', {
  data: function() {
    return {
      datastore : [
          { "breed": "Dachshund", "name": "Sousage"},
          { "breed": "Corgi", "name": "Plop"},
          { "breed": "Pomeranian", "name": "Floof"}
      ]
    }
  },
  template: '<zing-grid caption="Hello Doggos" :data="JSON.stringify(datastore)"></zing-grid>'
});

var vm = new Vue({ el:'#gridHolder' });

Bind the zing-grid data prop to a Vue data value and watch that value:

CloseCopy Copied
<template>
  <zing-grid :data="example"></zing-grid>
</template>

<script>
  export default {
    data() {
      return {
        example: [],
      }
    },
    watch: {
      example(newData) {
        this.example = newData;
      }
    }
  }
</script>

Display your app and new component

CloseCopy Copied
<div id="app">
  <my-component></my-component>
</div>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

More than responsive, mobile by design

Source: Wikipedia, World Bank
  • PWA Friendly
  • RAIL-Level Speed
  • Server-Side Render Capable
  • Touch Support

Built with Modern Web Technology

  • Web Components
    Web Components

    ZingGrid is built using native web components. This allows the grid's functionality to be 'hidden' to the user. With less code needed for deployment, it is fast and easy to get a grid up and running.

    Web Components are supported in all modern browsers and have legacy support, with polyfills. Dependencies are loaded when needed, not as a default.

    ZingGrid comes in 3 build types: Pure ES6, ES6 with component polyfills, and compiled ES5 (Babel and component polyfills).

    To get started, pick the right build for you on our download page.

  • Progressive Web Apps
    Progressive Web Apps

    What good is a fast grid if the application using it isn't?

    ZingGrid was built for a progressive web, and integrates well with Progressive Web Application technologies. This site is a showcase of the two coming together.

    If you want to maximize the performance of ZingGrid, we highly recommend you learn more about PWAs.

  • CSS3
    CSS3

    With many component options to use with ZingGrid, creating a shareable theme could have been daunting. Using CSS variables (polyfilled for legacy browsers) allows us to create internal themes easily and efficiently via a config system, instead of duplicating the same styling throughout the library.

    This benefits the user, who are able to hook into the same system to create their own reusable themes quickly. CSS variables allow for less specificity, which allows the user to add logical inline-styling on top of the variable system.

    With exceptions, you're able to style your grids as you would expect any other web element.

    Get started with the CSS Variable list.

  • ES6
    ES6

    ZingGrid is built with ES6 from the ground up and uses module loading to import only the components and features you need.

    Modern browsers support a majority of ES6 features natively, so employing polyfills when needed instead of as a default provides the fastest and leanest experience to your modern user-base.

    Please choose the build that is right for you on our download page.

ZingChart & ZingGrid clients

We work with a variety of clients from startups to established companies

We would like to work with you too.

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading