JSON/CSV based Vue Pivot Table

Build an interactive report based on the JSON or CSV data source in your Vue project

<template>
  <button v-on:click="onOpenLocalCSV">Open local CSV</button>
  <button v-on:click="onLoadRemoteCSV">Load remote CSV</button>
  <button v-on:click="onOpenLocalJSON">Open local JSON</button>
  <button v-on:click="onLoadRemoteJSON">Load remote JSON</button>

  <Pivot
    ref="pivot"
    componentFolder="https://cdn.flexmonster.com/"
    v-bind:report="report"
    v-bind:customizeCell="customizeCell"
  />
</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/happiness.csv",
          mapping: {
            "Year": {
              type: "string"
            }
          }
        },
        slice: {
          rows: [
            {
              uniqueName: "Region",
            },
            {
              uniqueName: "Country or region",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
            {
              uniqueName: "Year",
            },
          ],
          measures: [
            {
              uniqueName: "Score",
              aggregation: "median",
              grandTotalCaption: "Average Happiness",
            },
          ],
        },
        conditions: [
          {
            formula: "AND(#value > 7.3, #value < 10)",
            format: {
              backgroundColor: "#f0c63e",
              color: "#000000",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
          {
            formula: "AND(#value > 0, #value < 4.5)",
            format: {
              backgroundColor: "#f29c8d",
              color: "#000000",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
        ],
        formats: [
          {
            name: "",
            decimalPlaces: 2,
          },
        ],
      },
    };
  },
  methods: {
    onOpenLocalCSV() {
      this.$refs.pivot.flexmonster.connectTo({
        type: "csv",
        browseForFile: true,
      });
    },
    onLoadRemoteCSV() {
      const filename = prompt("Open remote CSV", "https://cdn.flexmonster.com/data/data.csv");
      if (filename != null) {
        this.$refs.pivot.flexmonster.connectTo({
          type: "csv",
          filename: filename,
        });
      }
    },
    onOpenLocalJSON() {
      this.$refs.pivot.flexmonster.connectTo({
        type: "json",
        browseForFile: true,
      });
    },
    onLoadRemoteJSON() {
      const filename = prompt("Open remote JSON", "https://cdn.flexmonster.com/data/data.json");
      if (filename != null) {
        this.$refs.pivot.flexmonster.connectTo({
          type: "json",
          filename: filename,
        });
      }
    },
    customizeCell(cell, data) {
      if (data.isGrandTotalColumn) {
        if (data.value < 5 && data.value >= 0) {
          cell.text = data.value.toPrecision(3) + " ☹️";
        } else if (data.value >= 5 && data.value < 7) {
          cell.text = data.value.toPrecision(3) + " 🙂";
        } else if (data.value >= 7 && data.value < 10) {
          cell.text = data.value.toPrecision(3) + " 😃";
        }
      }
    },
  },
};
</script>

Load your local, remote, or server-side generated JSON or CSV files.

Flexmonster Vue Pivot Grid is perfectly optimized to load and process your data extremely fast on the client-side. But for large CSV/JSON files (more than 1GB), we recommend using the Flexmonster Data Server tool, explicitly designed to handle large datasets.

Use detailed guides:

It will take just a few steps to set it up and start pivot table reporting in your Vue application.

You can also use mapping to control how the fields are shown on the grid in your Vue project.

JSON/CSV based Vue Pivot Table

See our live examples