react-flexmonster

React module for Flexmonster Pivot Table & Charts

This repository holds the source code for using Flexmonster Pivot in React applications.

• Getting started
• Usage
• License
• Support & feedback

Getting Started

If you don’t have React app, you can create it by running in the console:

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

Add Flexmonster React module by running in the console:

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 your browser on http://localhost:3000/.

Usage

Available attributes for FlexmonsterReact.Pivot:

• 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/.
• 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.
• report – property to set a report. It can be inline Report Object or URL to report JSON.
• toolbar – parameter to embed the toolbar or not. Default value is false – without the toolbar.
• customizeCell – function that allows customizing of separate cells. Have a look at customizeCell definition and examples.
• customizeContextMenu – function that allows customizing context menu. Have a look at customizeContextMenu definition and examples.
• licenseKey – the license key.

Here is an example how such attributes can be specified:

<FlexmonsterReact.Pivot toolbar={true} 
  componentFolder="https://cdn.flexmonster.com/" 
  width="100%" 
  report="https://cdn.flexmonster.com/reports/report.json"
/>

License

Here is Flexmonster licensing page. We have free 30 day trial!

Flexmonster React module is released as a MIT-licensed (free and open-source) add-on to Flexmonster Pivot.

Support & feedback

Please share your feedback or ask questions via Flexmonster Forum.