Flexmonster MCP Server is here! Connect your ✨AI assistant to our documentation. Get started
+
Get Free Trial
Get Free Trial
All documentation
      1. Sample Vue 3 project
      2. Integration with Vue 3
      3. Integration with Nuxt
      4. Usage examples
      5. The <Pivot> component
      6. Using methods and events
      7. Migrating from WebDataRocks to Flexmonster

    • 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.

    Flexmonster and Vue lifecycle hooks

    Vue 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 Vue.

    Example

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

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

    Here is the full list of available props.

    See also

    Frequently asked questions

    Can't find your answer here?
    Visit the FAQ page

    Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.