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
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';
Add a
<zing-grid>
tag inside yourrender()
function, like so:<zing-grid id="helloWorld" caption="Hello Doggos" data={JSON.stringify(this.state.dogs)} loading></zing-grid>
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()
.
Make sure the ZingGrid object is included:
import ZingGrid from `zinggrid`;
Define the method:
constructor(props) { this.customRenderer = this.customRenderer.bind(this); } customRenderer(text) { return text.toUpperCase(); }
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;
[integrations: react 16]