In this section, we will focus on how to integrate Pivot Table with href=”https://reactjs.org” />React – a JavaScript library for building interactive user interfaces.

There are two approaches for integration:

  • Download from GitHub a ready-to-use React application in which Pivot Table is already embedded using an import statement.
  • Follow 5 simple steps to embed 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, create a new folder, e.g, my-wdr-react-app/.
  2. Create a new index.html file 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 the 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 Pivot Table

  1. Add a <div> container where the pivot table will be embedded:
    <body>
        <div id="wdr-component"></div>
    </body>
  2. Now it’s time to render the pivot table to wdr-container using React. For this task 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 you can send console.log() function as an argument to ensure yourself that the React component was rendered successfully.

    Insert the next script into the 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>
    

    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 href=”https://www.webdatarocks.com/doc/init-api-call/”>new WebDataRocks().

Finally, WebDataRocks Pivot Table is embedded into your React application.

Example

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