The <Pivot> component

The <Pivot> component embeds Flexmonster into a Vue 2 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 2.

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 non-prop 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.

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.