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';
  2. Put <zing-grid> tag inside your render() function.

    <zing-grid id="helloWorld" caption="Hello Doggos" data={JSON.stringify(this.state.dogs)} loading></zing-grid>
  3. 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);
    }
  4. 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