Download
Documentation menu
Getting started
Integration with frameworks
  1. Available tutorials
  2. Integration with Angular
  3. Integration with React
  4. Integration with Vue
    5. Integration with Python
  5. Integration with Flutter
  6. Integration with jQuery
  7. Integration with AngularJS
Data sources
Configuring fields
Pivoting functionality
Formatting
Grid layout
Saving and loading reports
Add-ons
Customizing
Integration with charts
Technical specifications and licensing
API Reference

Integration with React

This tutorial shows how to integrate the WebDataRocks reporting tool with the React framework. You can also run our sample project from GitHub.

Prerequisites

Step 1. Create a project (optional)

If you don’t have a React application yet, create one. In this guide, we’re using Vite to create a project:

React + ES6

Commands for npm 7+:

npm create vite@latest my-app -- --template react
cd my-app
npm install

Commands for npm 6:

npm create vite@latest my-app --template react
cd my-app
npm install

React + TypeScript

Commands for npm 7+:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Commands for npm 6:

npm create vite@latest my-app --template react-ts
cd my-app
npm install

Step 2. Get WebDataRocks

Install the WebDataRocks React wrapper from npm:

npm install @webdatarocks/react-webdatarocks

Step 3. Include WebDataRocks

Step 3.1. Add WebDataRocks styles to the src/index.css file:

@import "@webdatarocks/webdatarocks/webdatarocks.css";

Step 3.2. Import WebDataRocksReact to the src/App.jsx file (src/App.tsx for React + TypeScript):

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

Step 3.3. In src/App.jsx (src/App.tsx for React + TypeScript), add WebDataRocks using the WebDataRocksReact.Pivot component:

function App() {
  return (
    <div>
      <WebDataRocksReact.Pivot 
         toolbar={true}
      />
    </div>
  );
}

export default App

Step 4. See the result

Run your application:

npm run dev

Open http://localhost:5173/ in the browser — WebDataRocks is embedded into your React project.

You can shut down the app with Ctrl + C.

Important WebDataRocks.Pivot is not compatible with <StrictMode>. If needed, disable <StrictMode> for the parts of the project where WebDataRocks is used.

Integrate WebDataRocks in a React/JSX project

This sample shows how to integrate WebDataRocks Pivot Table with the React/JSX application.

Run our sample project from GitHub

Step 1. Download or clone our sample project from GitHub:

React + ES6

git clone https://github.com/webdatarocks/pivot-react
cd pivot-react/ES6

React + TypeScript

git clone https://github.com/WebDataRocks/pivot-react
cd pivot-react/typescript

Step 2. Install the npm packages described in the package.json file:

npm install

Step 3. Run your application:

npm start

The application will be available at http://localhost:3000/.

You can shut down the app with Ctrl + C.

See also