Menu
Free Trials
Table of contents

Integration with React

This tutorial will help you to integrate Pivot Table Component with React framework. Follow the steps to set up a simple React/JSX app using Flexmonster Pivot Table:

Step 1: Create a new React project

    1. Create a new folder for the project, i.e. my-react-project/.
    2. Copy flexmonster/ folder into your project folder. You can find flexmonster/ inside of the package you have downloaded from the site.
    3. Create 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 jQuery and Flexmonster libraries to the 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="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="flexmonster/flexmonster.js"></script>
    </head>
    <body>
    </body>
    </html>
    

    Step 3: Initialize Pivot Table

      1. Add div to insert Pivot:
    <body>
        <div id="fm-container"></div>
    </body>
    
      1. Render pivot to fm-container using React. After that an empty grid will be shown. Please note, licenseKey is your license or trial key, so you should replace XXX with an actual key:
    <script type="text/babel">
    	ReactDOM.render(
    		<FlexmonsterReact.Pivot licenseKey="XXX"/>, 
    		document.getElementById("fm-container")
    	);
    </script>
    

      Step 4: Load sample report

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

      <script type="text/babel">
      	ReactDOM.render(
      		<FlexmonsterReact.Pivot report="http://www.flexmonster.com/download/report.xml" licenseKey="XXX"/>, 
      		document.getElementById("fm-container")
      	);
      </script>
      

      Properties

      All available attributes for FlexmonsterReact.Pivot the same as for $.flexmonster().

      • toolbar – parameter to embed the toolbar or not. Default value is false – without the toolbar.
      • licenseKey – the license key.
      • width – width of the component on the page (pixels or percent). The default value for width is 100%.
      • height – height of the component on the page (pixels or percent). The default value for height is 500.
      • componentFolder – URL of the component’s folder which contains all necessary files. Also, it is used as a base URL for report files, localization files, styles and images. The default value for componentFolder is flexmonster/.
      • report – property to set a report. It can be inline report JSON, URL to report JSON or URL to report XML.
      • global – object that allows you to preset options for all reports. These options can be overwritten for concrete reports. Object structure is the same as for report.

      Event handlers:

      • ready
      • reportcomplete
      • reportchange
      • update
      • cellclick
      • celldoubleclick
      • filteropen
      • fieldslistopen
      • fieldslistclose

      Examples

      Please find more examples on GitHub of Pivot Table Component integration with React framework.