How to Use a Vue Pivot Grid UI Component in Your Web App

In this post, we will review the PivotGrid component. Unlike a typical grid, a PivotGrid lets you change the way the data is presented. Let's take a look at how to add one to your web apps.

In the previous post, we learned how to create a sparkline using Kendo UI for Vue. In this post, we will review the PivotGrid component.

A PivotGrid displays data in a grid along with summarized values. Unlike a typical grid, a PivotGrid lets you change the way the data is presented. For example, you may have a data set with inventory items that include the number in stock, the category, the store, and the quarter. You can create a PivotGrid to analyze the total inventory in stock by store and by quarter. Or you can view the inventory in stock by category and by store. These different perspectives can be viewed in the same grid just by selecting which fields to use for the row and column of the grid. In a regular grid, we could only create one static view. Up next we will take a look at how to create a PivotGrid using example sales data for a grocery store.

Getting Started

We will need the PivotGrid, the PivotConfigurator, and the PivotDataSource components. The PivotGrid displays our summarized data. The PivotConfigurator helps us build the PivotGrid. And the PivotDataSource is an extension of the DataSource component used to bind our data to the PivotGrid and PivotConfigurator. First, we will initialize our project using the Vue webpack-simple template. Then we will install Kendo UI, a theme, the PivotGrid package, and the DataSource package.

npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-pivotgrid-vue-wrapper
npm install --save @progress/kendo-datasource-vue-wrapper

Next, in the main.js file, we will Import the Kendo UI packages, register the PivotGrid and PivotDataSource components globally, and add them to the component list.

import Vue from 'vue'import App from './App.vue'import '@progress/kendo-ui'import '@progress/kendo-theme-default/dist/all.css'import { PivotGrid, PivotGridInstaller } from '@progress/kendo-pivotgrid-vue-wrapper'import { PivotDataSource, DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'

Vue.use(PivotGridInstaller)
Vue.use(DataSourceInstaller)new Vue({
  el: '#app',
  components: {
  PivotGrid,
  PivotDataSource
  },
  render: h => h(App)})

Adding the Components

Our data has three fields: units sold, sales year, and category. To keep our example simple we will just use the years 2017 and 2018 and the categories coffee and tea. We want to see the units sold by category by year. The grid should also show the sum of units sold for each category and each year. The following is our data:

var products = [
  {
    UnitsSold: 100,
    SalesYear: 2017,
    Category: "Coffee",
      
  },
  {
    UnitsSold: 150,
    SalesYear: 2018,
    Category: "Coffee", 
  },
  {
    UnitsSold: 75,
    SalesYear: 2017,
    Category: "Tea"
  },
  {
    UnitsSold: 50,
    SalesYear: 2018,
    Category: "Tea"
  }];

First, we will create the PivotDataSource component and add it to our template. Then add the PivotGrid and PivotConfigurator components which will be bound to the PivotDataSource. The following is the updated template for our app:

<template>
  <div id="app">
    <kendo-pivotdatasource 
      ref="pivotDataSource"
      :data="data"
      :schema-model="schemaModel"
      :schema-cube="schemaCube"
      :measures="measures"
      :columns="columns"
      :rows="rows">
    </kendo-pivotdatasource>
    <kendo-pivotconfigurator
      :data-source-ref="'pivotDataSource'">
    </kendo-pivotconfigurator>
    <kendo-pivotgrid
      :data-source-ref="'pivotDataSource'">
    </kendo-pivotgrid>
  </div></template>

The PivotDataSource needs a ref attribute so we can bind it to the grid and the configurator. Because we are using a local data source we use the data attribute to set the data. The schema-model defines the structure of our data. The schema-cube stores the dimensions and measures. The dimensions are the groupings of our data. Our data will be grouped by category and year. Measures are summarized data values. Our measure is the units sold. A measure is defined by a field and an aggregate. An aggregate can be average, count, max, min, or sum. For our data set, we will define a sum and average measure.

The measures attribute defines which measure to apply to the data that was defined in the schema cube. We will only apply the sum measure. The average measure will still be available to use in our configurator. The columns and rows attributes define which fields to use for each. In this example, we will use the sales year field for the grid column and the category for the grid row. This is the script for our App component with all of the data defined:

export default {
  name: 'app',
  data () {
    return {
      data: products,
      schemaModel: {
        fields: {
          ProductName: { type: "string" },
          UnitPrice: { type: "number" },
          UnitsInStock: { type: "number" },
          SalesYear: { type: "number" },
          Category: { type: "string" }
        }
      },
      schemaCube: {
        dimensions: {
          SalesYear: { caption: "All Years" },
          Category: { caption: "All Categories" },
        },
        measures: {
          "Sum": { field: "UnitsSold", aggregate: "sum" },
          "Average": { field: "UnitsSold", aggregate: "average" }
        }
      },
      measures: ["Sum"],
      columns: [{ name: "SalesYear", expand: true}],
      rows: [{name: "Category", expand: true}]
    }
  }
}
</script>

By looking at the grid it is easy to see that more coffee than tea has sold overall. Also, the amount of coffee sold increased in 2018 while the amount of tea sold decreased. This information can be used to make business decisions like how much inventory to buy and keep in stock.

Summary

We created a PivotGrid to show the total number of products sold by category and by year. A PivotGrid puts the data in a format so we can see how the information is related. A PivotGrid is useful when you have multidimensional or hierarchical data. The dimensions are the fields you group the data by. Hierarchical data has multiple levels. For example, category and subcategory are levels and so is years and months. A unique feature of the grid is the cube. The cube stores the structure of the data. This includes dimensions and measures. The measures are the data values in each cell. For our example that was the units sold. We used a very small and simple data set to demonstrate how to use the PivotGrid. It is possible to have columns and rows in your grid with more than one dimension as well as multiple measures. These features makes it easier to analyze large amounts of information and gain valuable insights.

Resources

• Kendo UI PivotGrid for Vue Overview
• Kendo UI PivotDataSource for Vue Overview
• Kendo UI PivotGrid JavaScript API Reference
• Kendo UI PivotDataSource JavaScript API Reference
• API Reference
• Demos
• Kendo UI Web Font Icons
• Kendo UI Vue Docs and Demos
• Vue.js Webpack-Simple Template

Try Out Kendo UI for Yourself

Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI for Vue today and start developing your apps faster.

Start My Kendo UI Trial

Angular, React, and jQuery Versions

Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for jQuery.