The FlexmonsterReact.Pivot
component embeds Flexmonster into a React application.
To add an empty pivot table, specify the <FlexmonsterReact.Pivot>
tag without any props:
<FlexmonsterReact.Pivot/>
Learn more about integration with React.
All the FlexmonsterReact.Pivot
props are equivalent to the parameters of the new Flexmonster() API call. Check out the full list of available props.
Note that FlexmonsterReact.Pivot
supports only Flexmonster-specific props. Any other props are not supported, including id
, className
, or style
.
Props can be passed as hardcoded values or as variables:
To pass a prop as a hardcoded value, enclose the value in single or double quotes:
<FlexmonsterReact.Pivot
report="https://cdn.flexmonster.com/reports/report.json"
/>
In this example, the prop value is a string, but number and boolean values can be passed similarly (see an example).
You can also pass objects and functions using curly braces (see an example).
To pass a prop as a variable, enclose the variable in curly braces:
<FlexmonsterReact.Pivot report={this.report} />
Handlers for Flexmonster events can be passed as inline JavaScript code or as variables. In both cases, curly braces should be used:
<FlexmonsterReact.Pivot toolbar="true" beforetoolbarcreated={toolbar => { toolbar.showShareReportTab = true; }} />
<FlexmonsterReact.Pivot toolbar="true" beforetoolbarcreated={this.customizeToolbar} />
See more examples of handling Flexmonster events in React.
The following example demonstrates how different FlexmonsterReact.Pivot
props can be specified:
<FlexmonsterReact.Pivot width="100%" height="500" toolbar="true" report="https://cdn.flexmonster.com/reports/report.json" customizeCell={this.customizeCellFunction} beforetoolbarcreated={toolbar => { toolbar.showShareReportTab = true; }} shareReportConnection={{ url: "https://olap.flexmonster.com:9500" }} />
Note Here is the full list of available props.