This tutorial will help you to integrate Pivot Table Component with React framework. Choose your option:
my-react-project/.flexmonster/ folder into your project folder. You can find flexmonster/ inside of the package you have downloaded from the site.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>
Add Flexmonster library 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="flexmonster/flexmonster.js"></script>
</head>
<body>
</body>
</html>
div to insert Pivot:<body>
<div id="fm-container"></div>
</body>
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>
To see some data on grid add report attribute with report URL:
<script type="text/babel">
ReactDOM.render(
<FlexmonsterReact.Pivot report="https://cdn.flexmonster.com/reports/report.json" licenseKey="XXX"/>,
document.getElementById("fm-container")
);
</script>
Now a simple pivot table is added to your application.
Use a GitHub sample or follow the instructions below.
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/.
Use a GitHub sample or follow the instructions below.
If you don’t have React app, you can create it by running in the console:
npx create-react-app my-app --scripts-version=react-scripts-ts cd my-app
Add Flexmonster React module by running in the console:
npm i react-flexmonster --save
Download react-flexmonster.d.ts file and paste it to 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 your browser on http://localhost:3000/.
All available attributes for FlexmonsterReact.Pivot are the same as for new 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.customizeCell – function that allows customizing of separate cells. Have a look at customizeCell definition and examples.customizeContextMenu – function that allows customizing of separate cells. Have a look at customizeContextMenu definition and examples.Event handlers:
readyreportcompletereportchangeupdatecellclickcelldoubleclickfilteropenfieldslistopenfieldslistclose