Documentation menu
JS React Angular Vue
JS React Angular Vue

Integrating WebDataRocks

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.

See also