Docs

React Integration

ZingGrid works with your development stack, including React! Below is a quick walkthrough on how to add ZingGrid to your React project.

Usage

  1. Include the following dependencies in the header of your index.html file:
<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.

import React, { Component } from 'react';
// optional ZingGrid npm import header
import ZingGrid from 'zinggrid';
  1. Put <zing-grid> tag inside your render() function.
<zing-grid id="helloWorld" caption="Hello Doggos" data={JSON.stringify(this.state.dogs)} loading></zing-grid>
  1. Initialize data in componentDidMount() function.
/ 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);
}
  1. Final component:
import React, { Component } from 'react';
// optional ZingGrid npm import header
// import ZingGrid from 'zinggrid';

class ZingGrid extends Component {

  // initialize variables
  constructor(props) {
    super(props);
    this.state = {
      dogs: []
    }
  }

  // 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"
          }
        ]
      }
    });
  }

  // We are using JSON.stringify because that is the proper way to pass an object to an attribute
  // per the HTML spec. 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
  render() {
    return (
      <zing-grid id="helloWorld" caption="Hello Doggos" data={JSON.stringify(this.state.dogs)} loading></zing-grid>
    );
  }
}

Example

On This Page