Vue Pivot Table: flat view

A flat table is a simple way to show the initial data on a plain grid in your Vue project.

<template>
  <Pivot
    componentFolder="https://cdn.flexmonster.com/"
    height="370"
    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: "flat",
          },
        },
        slice: {
          columns: [
            {
              uniqueName: "Country",
            },
            {
              uniqueName: "Category",
            },
            {
              uniqueName: "Color",
            },
            {
              uniqueName: "Price",
            },
            {
              uniqueName: "Discount",
            },
          ],
        },
        formats: [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 2,
            currencySymbol: "$",
          },
        ],
      },
    };
  },
};
</script>

In flat format, your CSV and JSON data are shown row-by-row. It's a non-hierarchical grid view where your data is represented the same way as the records come from your data source.

Using the Field List you can set which columns to show and how to order them. You can also filter, sort, enable grand totals of the measures and show them at the top row of the table.

Plus, with Ctrl + click you can use multi-column sorting and sort the records by multiple fields.

Toggle between the layouts: flat, classic or compact, to find the the best way how to interpret data.

Vue Pivot Table: flat view

See our live examples