In this section, we will focus on how to integrate Pivot Table Component with React – a JavaScript library for building interactive user interfaces.

We will show the easiest way to embed your Pivot Table into a React/JSX application by making a simple HTML page with script tags.

Step 1: Create a new React project

  1. If you already have a React application, skip this step. Otherwise, you need to create a new folder, e.g, my-wdr-react-app/.
  2. Create new index.html inside of my-wdr-react-app/ and add React dependencies:
    <!DOCTYPE html>
    <html>
    <head>
        <title>WebDataRocks-React</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    </head>
    <body>
    </body>
    </html>
    

Step 2: Add WebDataRocks dependencies

Add WebDataRocks dependencies to the <head> section inside of index.html:

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

Step 3: Initialize your Pivot Table

  1. Add a <div> container where the Pivot will be embedded:
    <body>
        <div id="wdr-component"></div>
    </body>
  2. Now it’s time to render the pivot to wdr-container using React. For this task we will use a render() method from a react-dom package. It has the following signature:
    ReactDOM.render(element, container[, callback])
    This method returns the reference to the component or null for stateless components. The third argument is optional, but we can send console.log() function as an argument to ensure ourselves that the React component was rendered successfully.

    Insert the next script into your web page right before the closing </body> tag:

    <script type="text/babel">
    	ReactDOM.render(
    		<WebDataRocksReact.Pivot />,
    		document.getElementById("wdr-component"), console.log("React component was successfully rendered")
    	);
    </script>
    

    You can see that this script adds a React component with an empty grid which you can further customize by setting different properties of the pivot.

Step 4: Display the data

Add the data by setting report attribute for WebDataRocksReact.Pivot. Access the JSON report via its URL (to see this in practice, try with our sample of the report).

<script type="text/babel">
	ReactDOM.render(
		<WebDataRocksReact.Pivot report="https://cdn.webdatarocks.com/reports/report.json"/>,
		document.getElementById("wdr-component"), console.log("React component was successfully rendered")
	);
</script>
All available properties for WebDataRocksReact.Pivot are the same as for new WebDataRocks().

Step 5: Update the page

Finally, update the page to see the pivot table with your data.

Now you’ve learned how to embed WebDataRocks Pivot Table into your React application.

Let’s see the full code of our page: