Vue
Demos
Support
Forum
Download
Search results

Getting started with Vue Pivot Grid component

This section explains you the steps required to create a simple pivot table and demonstrate the basic usage of the pivot table component in a Vue environment.

Dependencies

The following list of dependencies are required to use the pivot table component in your application.

|-- @syncfusion/ej2-vue-pivotview
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-excel-export
        |-- @syncfusion/ej2-file-utils
        |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-pdf-export
        |-- @syncfusion/ej2-file-utils
        |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-grids
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-navigations

Setup Vue Environment

You can use Vue CLI to setup your vue applications. To install Vue CLI use the following commands.

npm install -g @vue/cli
npm install -g @vue/cli-init

Create a Vue Application

Start a new Vue application using below Vue CLI command.

vue init webpack-simple quickstart

cd quickstart
npm install

Adding Syncfusion pivot table package

All the available Essential JS 2 packages are published in npmjs.com registry.

To install pivot table component, use the following command.

npm install @syncfusion/ej2-vue-pivotview --save

The —save will instruct NPM to include the pivot table package inside the dependencies section of the package.json.

Registering pivot table Component

You can register the pivot table component in your application by using the Vue.use().

Refer to the code example given below.

import { PivotViewPlugin } from '@syncfusion/ej2-vue-pivotview';

Vue.use(PivotViewPlugin);

Registering PivotViewPlugin in vue, will register the pivot table component along with its required child directives globally.

Adding CSS Reference

The pivot table has different themes. They are:

  • Material
  • Fabric
  • Bootstrap
  • High Contrast

import pivot table component CSS as given below in <style> section of the App.vue file.

<style>
<!-- Material theme used for this sample -->
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-pivotview/styles/material.css";
</style>

Adding pivot table component

Add the EJ2 Vue pivot table using <ejs-pivotview> to the <template> section of the App.vue file in src directory. The properties of pivot table can be assigned in <ejs-pivotview> tag and that can be bounded under data section.

{% raw %}

<template>
    <div id="app">
        <ejs-pivotview :dataSourceSettings="dataSourceSettings"> </ejs-pivotview>
    </div>
</template>

<script>
import Vue from "vue";
import { PivotViewPlugin } from "@syncfusion/ej2-vue-pivotview";

Vue.use(PivotViewPlugin);

export default {
  data () {
    return {
      dataSourceSettings: {
        dataSource: [
            {
                "balance": 2430.87,
                "quantity": 11,
                "name": "Skinner Ward",
                "gender": "male",
                "company": "GROK",
                "state": "New Jercy"
            },
            {
                "balance": 3192.7,
                "quantity": 15,
                "name": "Gwen Dixon",
                "gender": "female",
                "company": "ICOLOGY",
                "state": "Vetaikan"
            },
            {
                "balance": 1663.84,
                "quantity": 14,
                "name": "Deena Gillespie",
                "gender": "female",
                "company": "OVERPLEX",
                "state": "New Jercy"
            }
        ],
        rows: [{ name: 'company' }],
        columns: [{ name: 'name' }],
        values: [{ name: 'balance' }, { name: 'quantity' }],
        filters: [{ name: 'gender' }]
      }
    }
  }
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>

{% endraw %}

Module injection

To create pivot table with additional features, inject the required modules. The modules that are available with basic functionality are as follows.

  • GroupingBar - Inject this module to access grouping bar feature.
  • FieldList - Inject this module to access pivot field list feature.
  • CalculatedField - Inject this module to access calculated field feature.

Register the required array of modules under the key pivotview in the provide section within the App.vue file as shown below. On doing so, only the injected views will be loaded and displayed along with pivot table.

<script>
provide: {
        pivotview: [GroupingBar, FieldList, CalculatedField]
    }
</script>

Enable Grouping Bar

The Grouping Bar feature automatically populates fields from the bound data source and allows end users to drag fields between different axes such as columns, rows, values, and filters, and create pivot table at runtime. It can be enabled by setting the showGroupingBar property to true and by injecting the GroupingBar module as follows.

If the GroupingBar module is not injected, the grouping bar will not be rendered with the pivot table component.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height= "height" :showGroupingBar="showGroupingBar"> </ejs-pivotview>
    </div>
</template>

<script>
import Vue from "vue";
import { PivotViewPlugin, GroupingBar } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './datasource.js';

Vue.use(PivotViewPlugin);

export default {
  data () {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
      },
      height: 350,
      showGroupingBar: true
    }
  },
  provide: {
        pivotview: [GroupingBar]
    }
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>


{% endraw %}

Enable Pivot Field List

The component provides a built-in Field List similar to Microsoft Excel. The top section of the field list allows the user to add and remove fields. The bottom section of the field list allows the user to rearrange the fields between different axes, including column, row, value, and filter along with filter and sort options. It can be enabled by setting the showFieldList property to true and by injecting the FieldList module as follows.

If the FieldList module is not injected, the Field List will not be rendered with the pivot table component.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height= "height" :showFieldList="showFieldList"> </ejs-pivotview>
    </div>
</template>

<script>
import Vue from "vue";
import { PivotViewPlugin, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './datasource.js';

Vue.use(PivotViewPlugin);

export default {
  data () {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
      },
      height: 350,
      showFieldList: true
    }
  },
  provide: {
        pivotview: [FieldList]
    }
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>


{% endraw %}

Calculated field

The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound datasource. It can be customized using the calculatedFieldSettings property through code behind. The setting required for calculated field feature at code behind are:

  • name: it allows to indicate the given calculated field with unique name.
  • formula: it allows to set the formula based on the given datasource.

Also calculated fields can be added to the bound datasource at run time through the built-in popup. The popup can be enabled by setting the allowCalculatedField property to true and by injecting the CalculatedField module as follows.

If the CalculatedField module is not injected, the calculated field popup will not be rendered with the pivot table component. Moreover calculated field is applicable only for value fields.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-button id="calculated-field-btn" :isPrimary="isPrimary" v-on:click.native="btnClick">Calculated Field</ejs-button>
        <ejs-pivotview id="pivotview" :height= "height" :dataSourceSettings="dataSourceSettings" :allowCalculatedField="allowCalculatedField"> </ejs-pivotview>
    </div>
</template>

<script>
import Vue from "vue";
import { PivotViewPlugin, CalculatedField } from "@syncfusion/ej2-vue-pivotview";
import { ButtonPlugin, ChangeEventArgs} from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './datasource.js';

Vue.use(PivotViewPlugin);
Vue.use(ButtonPlugin);

export default {
  data () {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        enableSorting: true,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Amount', type: 'CalculatedField' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: [],
        calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
      },
      height: 320,
      allowCalculatedField: true,
      isPrimary: true
    }
  },
  methods: {
    btnClick: function(args) {
      let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
      pivotGridObj.calculatedFieldModule.createCalculatedFieldDialog();
    }
  },
  provide: {
        pivotview: [CalculatedField]
    }
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>


{% endraw %}

Run the application

The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.

npm run dev

Output will be displayed as follows.

Source
Preview
app.vue
<template>
    <div id="app">
        <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :showFieldList="showFieldList"> </ejs-pivotview>
    </div>
</template>

<script>
import Vue from "vue";
import { PivotViewPlugin, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './datasource.js';

Vue.use(PivotViewPlugin);

export default {
  data () {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: [],
        calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
      },
      showFieldList: true,
      height: 350
    }
  },
  provide: {
    pivotview: [FieldList]
  }
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>


{% endraw %}
Previous
Next