Integration with React

This guide describes how to integrate WebDataRocks with React.

Prerequisites

Before starting, make sure that Node.js is installed on your machine. 

Next, choose one of the following guides:

1. Run the sample project from GitHub
2. Integrate WebDataRocks into a React project
3. Integrate WebDataRocks into a React/JSX project

Run the sample project from GitHub

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

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

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

Step 2. Install npm packages by running npm install in the console.

Step 3. Run your application:

npm start

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

Integrate WebDataRocks into a React project

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

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

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

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

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

Step 2. Get the WebDataRocks React module from npm:

npm install @webdatarocks/react-webdatarocks

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

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

Step 4. Import the WebDataRocksReact module to the src/App.jsx file (src/App.tsx in React + TypeScript):

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

Step 5. Open src/App.jsx (src/App.tsx in React + TypeScript) and add WebDataRocks there using the WebDataRocksReact.Pivot component:

function App() {
    return (
      <div className="App">
        <WebDataRocksReact.Pivot 
         toolbar={true}
         width="100%"
         report="https://cdn.webdatarocks.com/reports/report.json"
        />
      </div>
    );
}

Step 6. Run your application:

npm run dev

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

Important The @webdatarocks/react-webdatarocks wrapper is not compatible with <StrictMode>. If <StrictMode> is enabled in your project, disable it or enable only for that part of the project where WebDataRocks is not used.

Integrate WebDataRocks into a React/JSX project

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