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: "data/retail-data.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.[2019]"],
},
],
},
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;
}
With Flexmonster pivot grid for Vue.js, you can build interactive reports and summarize large data volumes from various data sources, such as CSV, JSON, Elasticsearch, Microsoft Analysis Services, MongoDB, SQL databases (MySQL, PostgreSQL, Oracle, etc) or other custom data sources.
Our pivot grid component can be integrated with Vue 2 and Vue 3 projects and will perfectly align with it. You can 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, make different calculations with your data.
You and your end-users can control how the data records are arranged on the grid using the pivot table layouts: classic (tabular), compact, or flat.
All the report results can be printed or exported to the 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.
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.