The classic pivot table form is an Excel-like layout where hierarchies sublevel are placed next to one another in separate rows or columns.
<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 old Excel versions.
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.