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 hooks (v16.8 and up).

Usage

1. For this example we'll start with a new React app:

   npx create-react-app zinggrid-react-helloworld
   cd zinggrid-react-helloworld
   npm install zinggrid
   npm start

   You can now view the app in a browser at localhost:3000.

2. In App.js, import ZingGrid:

   import 'zinggrid';

3. Remove the contents of the App() function and replace them with this line below. You may also remove the import logo... statement, we won't be needing it.

   return <zing-grid />

   When you save the file, the page should refresh and show an empty ZingGrid, with the message There are no records to display.

4. Let's add some data and update the zinggrid component to show it. Here's the full App.js file for this example:

import './App.css';
import 'zinggrid'

function App() {
  const data = [
    {"name": "Sousage", "breed": "Dachshund"},
    {"name": "Plop", "breed": "Corgi"},
    {"name": "Floof", "breed": "Pomeranian"}
  ]

  return <zing-grid caption="Dogs" data={JSON.stringify(data)} />
}

export default App;

For more details on integrating ZingGrid into a React app, see this article.