Vue Pivot Table: classic (tabular) view

The classic (tabular) form of the pivot table is an Excel-like layout where hierarchies sublevel are placed next to one another in separate rows or columns.

Edit in JSfiddle Get Free Trial

.vue

<template>
  <button v-on:click="changeLayout('compact')">Use compact form</button>
  <button v-on:click="changeLayout('classic')">Use classic form</button>

  <Pivot
    ref="pivot"
    componentFolder="https://cdn.flexmonster.com/"
    height="450"
    v-bind:report="report"
  />
</template>

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

export default {
  name: "PivotComponent",
  components: {
    Pivot,
  },
  data() {
    return {
      report: {
        dataSource: {
          type: "csv",
          filename: "data/data.csv",
        },
        options: {
          grid: {
            type: "classic",
          },
        },
        slice: {
          rows: [
            {
              uniqueName: "Country",
            },
            {
              uniqueName: "Business Type",
            },
          ],
          columns: [
            {
              uniqueName: "Color",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Price",
              format: "currency"
            },
          ],
          expandAll: true,
        },
        formats: [
         {
           name: "",
           thousandsSeparator: ",",
           decimalSeparator: ".",
           decimalPlaces: 2,
         },
         {
           name: "currency",
           currencySymbol: "$",
         },
       ],
      },
    };
  },
  methods: {
    changeLayout(layoutType) {
      this.$refs.pivot.flexmonster.setOptions({
        grid: {
          type: layoutType,
        },
      });
      this.$refs.pivot.flexmonster.refresh();
    },
  },
};
</script>

Compared to the default compact form of the Vue pivot table, where grand totals are displayed at the end of each row and subtotals are displayed in a separate row at the bottom, the classic form shows data as the tabular layout in Excel.

The pivot functionality stays the same. It's only up to you how you want your Vue pivot grid to look.

Still, for multi-level hierarchies with many sublevels, it's better to use a compact form to show data more smartly.

Dashboard Flat table

Changes to Flexmonster Software License Agreement

Vue Pivot Table: classic (tabular) view

See our live examples