Get Free Trial
List of all demos

Vue Pivot Table demo

Full-featured Vue.js pivot grid library for data visualization and reporting.


    <template>
    	<Pivot 
    		toolbar
    		height="550"
    		v-bind:customizeCell="customizeCell"
    		v-bind:shareReportConnection="{
    			url: 'https://olap.flexmonster.com:9500'
    		}"
    		v-bind:beforetoolbarcreated="customizeToolbar"
    		v-bind:report="report"
    	/>
    </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.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.

    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.