Full-featured Vue.js pivot grid library for developers to visualize and analyze large datasets.
<template>
<Pivot
componentFolder="https://cdn.flexmonster.com/"
height="550"
toolbar
v-bind:report="report"
v-bind:customizeCell="customizeCell"
v-bind:shareReportConnection="{
url: 'https://olap.flexmonster.com:9500',
}"
v-bind:beforetoolbarcreated="customizeToolbar"
/>
</template>
<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
export default {
name: "PivotComponent",
components: {
Pivot,
},
data() {
return {
report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/retail-data-2024.json",
mapping: {
"Quantity": {
type: "number",
},
"Price": {
type: "number",
},
"Retail Category": {
type: "string",
},
"Sales": {
type: "number",
},
"Order Date": {
type: "year/quarter/month/day",
},
"Date": {
type: "date",
},
"Status": {
type: "string",
},
"Product Code": {
type: "string",
},
"Phone": {
type: "string",
},
"Country": {
type: "string",
folder: "Location",
},
"City": {
type: "string",
folder: "Location",
},
"CurrencyID": {
type: "property",
hierarchy: "Country",
},
"Contact Last Name": {
type: "string",
},
"Contact First Name": {
type: "string",
},
"Deal Size": {
type: "string",
},
},
},
slice: {
rows: [
{
uniqueName: "Country",
filter: {
members: [
"country.[australia]",
"country.[usa]",
"country.[japan]",
],
},
},
{
uniqueName: "Status",
},
],
columns: [
{
uniqueName: "Order Date",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
format: "currency",
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Price",
aggregation: "sum",
},
},
},
expands: {
rows: [
{
tuple: ["country.[japan]"],
},
],
},
drills: {
columns: [
{
tuple: ["order date.[2024]"],
},
],
},
flatSort: [
{
uniqueName: "Price",
sort: "desc",
},
],
},
conditions: [
{
formula: "#value > 35000",
measure: "Price",
aggregation: "sum",
format: {
backgroundColor: "#00A45A",
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: "12px",
},
},
{
formula: "#value < 2000",
measure: "Price",
aggregation: "sum",
format: {
backgroundColor: "#df3800",
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: "12px",
},
},
],
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
nullValue: "-"
},
{
name: "currency",
currencySymbol: "$"
},
],
},
};
},
methods: {
customizeToolbar(toolbar) {
toolbar.showShareReportTab = true;
},
customizeCell(cell, data) {
if (data.type === "header" && data.hierarchy?.caption === "Country" && data.member?.properties) {
const name = data.member.properties.CurrencyID;
cell.addClass("fm-custom-cell");
let flag;
if (data.expanded) {
flag = `<i class="fm-icon fm-expanded-icon" title="Click to collapse"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
} else {
flag = `<i class="fm-icon fm-collapsed-icon" title="Click to expand"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
}
cell.text = `<div style="display:flex; align-items:center; font-size:12px; position:relative;">
${flag}<span style="margin-left: 2px; line-height: 16px;">${data.member.caption}</span></div>`;
}
},
},
};
</script>
.fm-custom-cell {
display: flex !important;
align-items: center !important;
font-size: 12px !important;
}
.fm-custom-cell .flag-icon {
width: 21px !important;
height: 16px !important;
margin-left: 0 !important;
margin-right: 2px !important;
}
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
top: -2px;
height: 16px;
}
To experiment with Flexmonster in a Vue.js project, check out a ready-to-use sample Vue project on GitHub.
With Flexmonster pivot grid for Vue.js, you can build interactive reports and summarize large data volumes from various data sources:
Our pivot grid component integrates seamlessly with Vue 2 and Vue 3 projects. You can also customize the pivot grid to match your software or website design, language, and configure the report based on business requirements.
With this rich-featured Vue pivot table library, you can summarize, filter, sort, group, and make different calculations with your data.
You and your end-users can control how the data records are arranged on the grid using the Flexmonster Pivot layouts: classic (tabular), compact, or flat. It is also possible to show details about value cells in the drill-through view.
All the report results can be either printed or exported to files of the most common formats: PDF, CSV, Excel, HTML, or PNG. As a developer, you can define how an end-user can export their reports: to the local file system or a server.
It is also possible to save your report as JSON or share it via the link. In that case, you can restore it in Flexmonster Pivot later.
Easily integrate the pivot grid library into your Vue.js project with the detailed how-to guide or follow our Vue pivot table integration video tutorial.