The <Pivot> component

The <Pivot> component embeds Flexmonster into a Vue 3 application.

The simplest component usage

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

<Pivot/>

Learn more about integration with Vue 3.

Available props

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

In addition to Flexmonster-specific props, you can also set standard HTML attributes (e.g., id, class, and style). They are not included in the component’s props but are available as fallthrough attributes.

Passing props to <Pivot>

Props can be passed as hardcoded values or as variables:

Hardcoded value

<Pivot
  report="https://cdn.flexmonster.com/reports/report.json"
/>

In this example, the prop value is passed as a string. Learn how to pass values of different types.

Variable

To pass a prop as a variable, use the v-bind directive:

<Pivot
  v-bind:report="report"
/>

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

Handling Flexmonster events

To handle Flexmonster events through <Pivot> props, use the v-bind directive. For example:

<Pivot
  report="https://cdn.flexmonster.com/reports/report.json"
  v-bind:reportcomplete="onReportComplete"
/>

The event handler (in our case, onReportComplete) should be defined in the <script> section of the file.

See more examples of handling Flexmonster events in Vue 3.

Example

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

<Pivot
  width="100%"
  height="500"
  toolbar
  report="https://cdn.flexmonster.com/reports/report.json"
  v-bind:customizeCell="customizeCellFunction"
  v-bind:reportcomplete="onReportComplete"
/>

Note Here is the full list of available props.