The <Pivot>
component embeds Flexmonster into a Vue 3 application.
To add an empty pivot table, specify the <Pivot>
tag without any props and attributes:
<Pivot/>
Learn more about integration with Vue 3.
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.
Props can be passed as hardcoded values or as variables:
<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.
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.
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.
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.