This guide describes how to integrate WebDataRocks with React.
Before starting, make sure that Node.js is installed on your machine.
Next, choose one of the following guides:
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/
.
Step 1. If you don’t have a React application yet, create one. In this guide, we’re using Vite:
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
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 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.
This sample shows how to integrate WebDataRocks Pivot Table with the React/JSX application.