Need a special offer?Find out if your project fits.
+
List of all demos

Vue Pivot Table demo

Full-featured Vue.js pivot grid library for data visualization and reporting.


    <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: "data/retail-data.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: "-13w0a1w1c23j00",
                },
              ],
              sorting: {
                column: {
                  type: "desc",
                  tuple: [],
                  measure: {
                    uniqueName: "Price",
                    aggregation: "sum",
                  },
                },
              },
              expands: {
                rows: [
                  {
                    tuple: ["country.[japan]"],
                  },
                ],
              },
              drills: {
                columns: [
                  {
                    tuple: ["order date.[2019]"],
                  },
                ],
              },
              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: "-13w0a1w1c23j00",
                thousandsSeparator: " ",
                decimalSeparator: ".",
                decimalPlaces: 0,
                currencySymbol: "$",
                positiveCurrencyFormat: "$1",
                nullValue: "-",
                textAlign: "right",
                isPercent: false,
              },
            ],
          },
        };
      },
      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;
    }
    

    With Flexmonster Pivot Grid for Vue.js, you can easily show the data to your end-users and let them create interactive reports based on different data sources like: CSV, JSON, Elasticsearch, Microsoft Analysis Services, MongoDB, SQL databases (MySQL, PostgreSQL, Oracle, etc) or other custom data sources.

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

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

    You and your end-users can control how the data records are arranged on the grid using the pivot table layouts: classic, compact, or flat.

    All the report results can be printed or exported to the 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.