Vue Pivot Table: Classic (tabular) view

<template>
  <button @click="changeLayout('compact')">Use compact form</button>
  <button @click="changeLayout('classic')">Use classic form</button>
  <button @click="setRepeatLabels(true)">Repeat labels on</button>
  <button @click="setRepeatLabels(false)">Repeat labels off</button>

  <Pivot
    ref="pivot"
    height="450"
    :report="report"
  />
</template>

<script setup>
  import { useTemplateRef } from "vue";
  import Pivot from "vue-flexmonster/vue3";
  import "flexmonster/flexmonster.css";

  const pivot = useTemplateRef("pivot");
  const report = {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/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: "$"
      }
    ]
  };

  function changeLayout(layoutType) {
    pivot.value.flexmonster.setOptions({
      grid: {
        type: layoutType
      }
    });
    pivot.value.flexmonster.refresh();
  }

  function setRepeatLabels(enabled) {
    pivot.value.flexmonster.setOptions({
      grid: {
        repeatAllLabels: enabled
      }
    });
    pivot.value.flexmonster.refresh();
  }
</script>