Get Free Trial
Get Free Trial
All documentation
    3. The FlexmonsterReact.Pivot component

    • The FlexmonsterReact.Pivot component

    The FlexmonsterReact.Pivot component embeds Flexmonster into a React application.

    The simplest component usage

    To add an empty pivot table, specify the <FlexmonsterReact.Pivot> tag without any props:

    <FlexmonsterReact.Pivot/>

    Learn more about integrations with React:

    Available props

    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.

    Passing props to FlexmonsterReact.Pivot

    Props can be passed as hardcoded values or as variables:

    Hardcoded value

    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).

    Variable

    To pass a prop as a variable, enclose the variable in curly braces:

    <FlexmonsterReact.Pivot
  report={report}
/>

    Flexmonster and React lifecycle hooks

    React lifecycle methods and the useEffect() hook are not synchronized with Flexmonster's lifecycle. However, you can get information about Flexmonster's state using its events.

    To track the initialization of Flexmonster, use the ready or the reportcomplete event. Changes in Flexmonster's state (e.g., a report is changed) can be tracked via other Flexmonster events.

    Learn more about using Flexmonster events in React.

    Example

    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={customizeCellFunction}
  beforetoolbarcreated={toolbar => {
    toolbar.showShareReportTab = true;
  }}
  shareReportConnection={{
    url: "https://olap.flexmonster.com:9500"
 }}
/>

    Here is the full list of available props.

    See also

    Frequently asked questions

    Can't find your answer?
    Visit the FAQ

    Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.