The <Flexmonster> component

The <Flexmonster> component embeds Flexmonster into a Svelte application.

The simplest component usage

To add an empty pivot table, specify the <Flexmonster> tag without any props and attributes:

<Flexmonster />

Learn more about integration with Svelte.

Available props

All the <Flexmonster> props are equivalent to the parameters of the new Flexmonster() API call. Check out the full list of available props.

Note that <Flexmonster> supports only Flexmonster-specific props. Any other props are not supported, including id, class, or style.

Passing props to Flexmonster

Props can be passed as hardcoded values or as variables:

Hardcoded value

To pass a prop as a hardcoded value, enclose it in single or double quotes or leave it unquoted. If the value is a boolean or other JavaScript expression, use curly braces.

Example:

<Flexmonster
  toolbar={true}
  report="https://cdn.flexmonster.com/reports/report.json"
/>

Variable

<Flexmonster
  report={report}
/>

The specified variable (in our case, the report) should be defined in the <script> section of the file.

Learn how to pass values to the component.

Flexmonster and Svelte lifecycle hooks

Svelte lifecycle hooks 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 Svelte.

Example

The following example demonstrates how different <Flexmonster> props can be specified:

<Flexmonster
  bind:pivot
  toolbar={true}
  report="https://cdn.flexmonster.com/reports/report.json"
  height="600"
  beforetoolbarcreated={toolbar => {
    toolbar.showShareReportTab = true;
  }}
  customizeCell={customizeCellFunction}
/>

Here is the full list of available props.

Changes to Flexmonster Software License Agreement