Full-featured Vue.js pivot grid library for data visualization and reporting.
<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: "-13w0a1w1c23j00", }, ], 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: "-13w0a1w1c23j00", thousandsSeparator: " ", decimalSeparator: ".", decimalPlaces: 0, currencySymbol: "$", positiveCurrencyFormat: "$1", nullValue: "-", textAlign: "right", isPercent: false, }, ], }, }; }, 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 easily show the data to your end-users and let them create interactive reports based on different data sources like: CSV, JSON, Elasticsearch, Microsoft Analysis Services, MongoDB, SQL databases (MySQL, PostgreSQL, Oracle, etc) or other custom data sources.
Easily integrate the pivot grid library into your Vue.js project with the detailed how-to guide or follow our video tutorial.
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, 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.