☝️Small business or a startup? See if you qualify for our special offer.
+
List of all demos

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.

Domain mismatchFlexmonster is used on the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com, which does not match the domain your license key was issued for (flexmonster.com)

Contact our team to request a key for the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com

You are using the following key:
Z707-XCI209-0Q203E-3I5M00-28254L-0B2Z2S-0L0T3F-1H3W3A-421F46

Current version: 2.9.109 (build 08/04/2025)

  • .vue
<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: "https://cdn.flexmonster.com/data/data.csv",
        },
        options: {
          grid: {
            type: "flat",
          },
        },
        slice: {
          measures: [
            {
              uniqueName: "Country",
            },
            {
              uniqueName: "Category",
            },
            {
              uniqueName: "Color",
            },
            {
              uniqueName: "Price",
            },
            {
              uniqueName: "Discount",
            },
          ],
        },
        formats: [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 2,
            currencySymbol: "$",
          },
        ],
      },
    };
  },
};
</script>

In flat format, your data is shown row-by-row. This is a non-hierarchical grid view, where your data is represented the same way as the records from your data source.

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

Plus, with Ctrl + click (Command + click on macOS), you can use multi-column sorting to sort the records by multiple fields.

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