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:

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

<Flexmonster
  report={report}
/>

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.

See also

• Sample Svelte project
• Integration with Svelte
• Using Flexmonster methods and events