Vue Pivot Table demo

A feature-rich Vue pivot table component for developers who need multi-dimensional data analysis in their Vue.js apps. Easily visualize massive datasets and build advanced analytical reporting with a fully customizable UI.

Edit in JSfiddle Get Free Trial

<template>
  <Pivot
    componentFolder="https://cdn.flexmonster.com/"
    height="550"
    toolbar
    v-bind:report="report"
    v-bind:customizeCell="customizeCell"
    v-bind:shareReportConnection="{
      url: 'https://olap.flexmonster.com:9500',
    }"
    v-bind:beforetoolbarcreated="customizeToolbar"
  />
</template>

<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";

export default {
  name: "PivotComponent",
  components: {
    Pivot,
  },
  data() {
    return {
      report: {
        dataSource: {
          type: "json",
          filename: "https://cdn.flexmonster.com/data/retail-data-2024.json",
          mapping: {
            "Quantity": {
              type: "number",
            },
            "Price": {
              type: "number",
            },
            "Retail Category": {
              type: "string",
            },
            "Sales": {
              type: "number",
            },
            "Order Date": {
              type: "year/quarter/month/day",
            },
            "Date": {
              type: "date",
            },
            "Status": {
              type: "string",
            },
            "Product Code": {
              type: "string",
            },
            "Phone": {
              type: "string",
            },
            "Country": {
              type: "string",
              folder: "Location",
            },
            "City": {
              type: "string",
              folder: "Location",
            },
            "CurrencyID": {
              type: "property",
              hierarchy: "Country",
            },
            "Contact Last Name": {
              type: "string",
            },
            "Contact First Name": {
              type: "string",
            },
            "Deal Size": {
              type: "string",
            },
          },
        },
        slice: {
          rows: [
            {
              uniqueName: "Country",
              filter: {
                members: [
                  "country.[australia]",
                  "country.[usa]",
                  "country.[japan]",
                ],
              },
            },
            {
              uniqueName: "Status",
            },
          ],
          columns: [
            {
              uniqueName: "Order Date",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Price",
              aggregation: "sum",
              format: "currency",
            },
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Price",
                aggregation: "sum",
              },
            },
          },
          expands: {
            rows: [
              {
                tuple: ["country.[japan]"],
              },
            ],
          },
          drills: {
            columns: [
              {
                tuple: ["order date.[2024]"],
              },
            ],
          },
          flatSort: [
            {
              uniqueName: "Price",
              sort: "desc",
            },
          ],
        },
        conditions: [
          {
            formula: "#value > 35000",
            measure: "Price",
            aggregation: "sum",
            format: {
              backgroundColor: "#00A45A",
              color: "#FFFFFF",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
          {
            formula: "#value < 2000",
            measure: "Price",
            aggregation: "sum",
            format: {
              backgroundColor: "#df3800",
              color: "#FFFFFF",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
        ],
        formats: [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 2,
            nullValue: "-"
          },
          {
            name: "currency",
            currencySymbol: "$"
          },
        ],
      },
    };
  },
  methods: {
    customizeToolbar(toolbar) {
      toolbar.showShareReportTab = true;
    },
    customizeCell(cell, data) {
      if (data.type === "header" && data.hierarchy?.caption === "Country" && data.member?.properties) {
        const name = data.member.properties.CurrencyID;
        cell.addClass("fm-custom-cell");
        let flag;
        if (data.expanded) {
          flag = `<i class="fm-icon fm-expanded-icon" title="Click to collapse"></i>
          <img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
        } else {
          flag = `<i class="fm-icon fm-collapsed-icon" title="Click to expand"></i>
          <img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
        }
        cell.text = `<div style="display:flex; align-items:center; font-size:12px; position:relative;">
        ${flag}<span style="margin-left: 2px; line-height: 16px;">${data.member.caption}</span></div>`;
      }
    },
  },
};
</script>

.fm-custom-cell {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
}

.fm-custom-cell .flag-icon {
  width: 21px !important;
  height: 16px !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
  top: -2px;
  height: 16px;
}

To experiment with Flexmonster in a Vue.js project, check out a ready-to-use sample Vue project on GitHub.

Show data from various data sources

With Flexmonster pivot grid for Vue.js, you can build interactive reports and summarize large data volumes from various data sources:

Fit to your Vue application

Our pivot grid component integrates seamlessly with Vue 2 and Vue 3 projects. You can also customize the pivot grid to match your software or website design, language, and configure the report based on business requirements.

Use advanced reporting pivot table features

With this rich-featured Vue pivot table library, you can summarize, filter, sort, group, and make different calculations with your data.

You and your end-users can control how the data records are arranged on the grid using the Flexmonster Pivot layouts: classic (tabular), compact, or flat. It is also possible to show details about value cells in the drill-through view.

All the report results can be either printed or exported to files of the most common formats: PDF, CSV, Excel, HTML, or PNG. As a developer, you can define how an end-user can export their reports: to the local file system or a server.

It is also possible to save your report as JSON or share it via the link. In that case, you can restore it in Flexmonster Pivot later.

Embed a Vue pivot table into your application

Easily integrate the pivot grid library into your Vue.js project with the detailed how-to guide or follow our Vue pivot table integration video tutorial.

MS Analysis Services

Prev Next

Frequently asked questions

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

What is Flexmonster Pivot Table & Charts?

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.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Changes to Flexmonster Software License Agreement