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. This article covers using ZingGrid with React of v16.8 and down. For newer versions of React, and to use the React Hooks, see this page

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:

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:

Additional Usage

Register Method

When using ZGColumn[renderer], the method must first be registered using registerMethod().

1. Make sure the ZingGrid object is included:

   import ZingGrid from `zinggrid`;

2. Define the method:

   constructor(props) {
     this.customRenderer = this.customRenderer.bind(this);
   }
   
   customRenderer(text) {
     return text.toUpperCase();
   }

3. Add method to ZGColumn[renderer]:

   <zg-column index="first" header="Column 1" renderer="customRenderer"></zg-column>

Altogether, this is what it'll look like:

import React, { Component } from 'react';
import ZingGrid from 'zinggrid';

class RegisterRenderer extends Component {

    constructor(props) {
      super(props);
      // define variables
      this.datastore = [
        { "first": "Maria", "last": "John", "number": 123 },
        { "first": "David", "last": "Smith", "number": 456 },
        { "first": "Felicity", "last": "Snow", "number": 789 }
      ];

      // define method
      this.customRenderer = this.customRenderer.bind(this);
    }

    // assign data on mount
    componentDidMount() {
      this.refs.firstGrid.setData(this.datastore);

      // Register method
      ZingGrid.registerMethod(this.customRenderer, 'customRenderer');
    }

    // toggle theme attribute on grid
    customRenderer(text) {
      return text.toUpperCase();
    }

    render() {
      return (
        <div>
          <zing-grid
            ref="firstGrid"
            caption="Hello World">
            <zg-colgroup>
              <zg-column index="first" header="Column 1" renderer="customRenderer"></zg-column>
              <zg-column index="last" header="Column 2"></zg-column>
              <zg-column index="number" header="Column 3"></zg-column>
            </zg-colgroup>
          </zing-grid>
        </div>
      )
    }
  }
export default RegisterRenderer;