React Integration

ZingGrid works with your development stack, including React! In this guide, we'll walk you through 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. Add a <zing-grid> tag inside your render() function, like so:

    <zing-grid id="helloWorld" caption="Hello Doggos" data={JSON.stringify(this.state.dogs)} loading></zing-grid>
  3. Initialize data in a componentDidMount() function, like so:

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

Altogether, this is what it'll look like:

```javascript
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>
    );
  }
}
```

React Integrated Grid

Here is our complete grid that is successfully integrated with React: