<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: "https://cdn.flexmonster.com/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 or JSON files (more than 100 MB), we recommend using the Flexmonster Data Server tool, which is 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 the mapping to control how the fields are shown on the grid in your Vue project.