1.Integration with React

This tutorial will help you integrate Flexmonster with the React framework. Here we describe three possible approaches:

A React/JSX application with Flexmonster Pivot (an HTML page with script tags)
A React + ES6 application with Flexmonster Pivot
A React + TypeScript application with Flexmonster Pivot

A React/JSX application with Flexmonster Pivot

Step 1: Create a new React project

Create a new folder for the project, e.g. my-react-project/.
Copy the flexmonster/ folder into your project folder. You can find flexmonster/ inside of the package that you downloaded from our website.

Create an index.html file inside my-react-project/ and add React dependencies:

<!DOCTYPE html>
<html>
<head>
    <title>My React/Flexmonster Project</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 Flexmonster dependencies

Add the Flexmonster library to index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My React/Flexmonster Project</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>
    <script src="flexmonster/flexmonster.js"></script>
</head>
<body>
</body>
</html>

Step 3: Initialize the pivot table

Add a div to insert the pivot table:

<body>
    <div id="fm-container"></div>
</body>

Render the pivot table to fm-container using React. After that an empty grid will be shown. Note that licenseKey is your license or trial key, so replace XXXX-XXXX-XXXX-XXXX-XXXX with an actual key:
```
<script type="text/babel">
	ReactDOM.render(
		<FlexmonsterReact.Pivot licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"/>, 
		document.getElementById("fm-container")
	);
</script>
```

Step 4: Load a sample report

To see some data on the grid add the report attribute with the report URL:

<script type="text/babel">
	ReactDOM.render(
		<FlexmonsterReact.Pivot report="https://cdn.flexmonster.com/reports/report.json" licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX"/>, 
		document.getElementById("fm-container")
	);
</script>

Now a simple pivot table is added to your application.

A React + ES6 application with Flexmonster Pivot

Use the GitHub sample or follow the instructions below.

If you don’t have a React app, you can create one by running these commands in the console:

npx create-react-app my-app
cd my-app

Add the Flexmonster React module by running:

npm i react-flexmonster --save

Include FlexmonsterReact into App.js:

import * as FlexmonsterReact from 'react-flexmonster';

Insert a pivot table into App.js:

class App extends Component {
  render() {
    return (
      <div className="App">
        <FlexmonsterReact.Pivot toolbar={true} 
        componentFolder="https://cdn.flexmonster.com/" width="100%" 
        report="https://cdn.flexmonster.com/reports/report.json"/>
      </div>
    );
  }
}

Run your application from the console:

npm start

To see the result open http://localhost:3000/ in your browser.

A React + TypeScript application with Flexmonster Pivot

Use the GitHub sample or follow the instructions below.

If you don’t have a React app, you can create one by running these commands in the console:

npx create-react-app my-app --scripts-version=react-scripts-ts
cd my-app

Add the Flexmonster React module by running in the console:

npm i react-flexmonster --save

Download react-flexmonster.d.ts and paste the file to the my-app/ folder.

Include FlexmonsterReact into App.tsx:

import * as FlexmonsterReact from 'react-flexmonster';

Insert a pivot table into App.tsx:

class App extends React.Component {
  public render() {
    return (
      <div className="App">
        <FlexmonsterReact.Pivot toolbar={true} 
        componentFolder="https://cdn.flexmonster.com/" width="100%" 
        report="https://cdn.flexmonster.com/reports/report.json"/>
      </div>
    );
  }
}

Run your application from the console:

npm start

To see the result open http://localhost:3000/ in your browser.

Properties

All available attributes for FlexmonsterReact.Pivot are the same as for new Flexmonster().

toolbar – Boolean. The parameter to embed the toolbar or not. Default value: false – no toolbar.
licenseKey – String. The license key.
width – Number | String. The width of the component on the page (either in pixels or as a percentage). Default value: "100%".
height – Number | String. The height of the component on the page (either in pixels or as a percentage). Default value: 500.
componentFolder – String. The URL of the component’s folder that contains all the necessary files. It is also used as the base URL for report files, localization files, styles, and images. Default value: "flexmonster/".
report – Report Object | String. The property to set a report. It can be an inline report JSON or a URL to the report JSON. XML reports are also supported for backward compatibility.
global – Report Object. Allows you to preset the options for all reports. These options can be overwritten for specific reports. This object’s structure is the same as for report.
customizeCell – Function. Allows the customization of separate cells. For more info, take a look at customizeCell definition and examples.
customizeContextMenu – Function. Allows the customization of separate cells. For more info, take a look at customizeContextMenu definition and examples.

Event handlers can be specified for all available Flexmonster events. Here is the full list of Flexmonster events.

What’s next?

You may be interested in the following articles: