Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    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 the <Pivot> props

    Props can be passed as hardcoded values or as variables:

    Hardcoded value

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

    In this example, a string value is passed to a prop. 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.

    See also