1. API reference
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Connecting to JSON using the Data Compressor
      3. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using the Data Compressor
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to other databases
      3. Connecting to a database with Node.js
      4. Connecting to a database with .NET
      5. Connecting to a database with .NET Core
      6. Connecting to a database with Java
      7. Connecting to a database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with the Accelerator
      3. Installing the Accelerator as a Windows service
      4. Referring the Accelerator as a DLL
      5. Configuring the authentication process
      6. Configuring a secure HTTPS connection
      7. Troubleshooting
    5. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with the Accelerator
      3. Configuring Mondrian roles
      4. Configuring username/password protection
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    6. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
  4. Security
    1. Security in Flexmonster
    2. Security aspects when connecting to an OLAP cube
      1. The data transfer process
      2. Data security
      3. Data access management
    3. Security aspects when connecting to a database
      1. The data transfer process
      2. Data access management
  5. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Number formatting
    6. Conditional formatting
    7. Set the report for the component
    8. Get the report from the component
    9. Date and time formatting
    10. Configuring global options
    11. Export and print
    12. Calculated values
    13. Custom sorting
  6. Integration with frameworks
    1. Available tutorials
    2. Integration with AngularJS (v1.x)
    3. Integration with Angular
    4. Integration with React
    5. Integration with Webpack
    6. Integration with ASP.NET
    7. Integration with jQuery
    8. Integration with JSP
    9. Integration with TypeScript
    10. Integration with RequireJS
    11. Integration with PhoneGap
  7. Integration with charts
    1. Integration with Highcharts
    2. Integration with Google Charts
    3. Integration with FusionCharts
    4. Integration with any charting library
  8. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Customizing context menu
    4. Localizing component
  9. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.6 to 2.7
    4. Migration guide from 2.5 to 2.6
    5. Migration guide from 2.4 to 2.5
    6. Migration guide from 2.3 to 2.4
    7. Migration guide from 2.2 to 2.3
    8. Documentation for older versions
Table of contents

Integration with React

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

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

A React/JSX application with Flexmonster Pivot

Step 1: Create a new React project

  1. Create a new folder for the project, e.g. my-react-project/.
  2. Copy the flexmonster/ folder into your project folder. You can find flexmonster/ inside of the package that you downloaded from our website.
  3. 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

  1. Add a div to insert the pivot table:
    <body>
        <div id="fm-container"></div>
    </body>
    
  2. 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/".
  • reportReport 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.
  • globalReport 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: