This section explains you the steps required to create a simple Pivot Grid and demonstrate the basic usage of the Pivot Grid component in a Vue environment.
The following list of dependencies are required to use the Pivot Grid 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
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
Start a new Vue application using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install Pivot Grid component, use the following command.
npm install @syncfusion/ej2-vue-pivotview --save
The —save will instruct NPM to include the pivot grid package inside the
dependencies
section of thepackage.json
.
You can register the Pivot Grid 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 grid component along with its required child directives globally.
The Pivot Grid has different themes. They are:
import Pivot Grid 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>
Add the EJ2 Vue Pivot Grid using <ejs-pivotview>
to the <template>
section of the App.vue
file in src directory.
The properties of Pivot Grid can be assigned in <ejs-pivotview>
tag and that can be bounded under data
section.
{% raw %}
<template>
<div id="app">
<ejs-pivotview :dataSource="dataSource"> </ejs-pivotview>
</div>
</template>
<script>
import Vue from "vue";
import { PivotViewPlugin } from "@syncfusion/ej2-vue-pivotview";
Vue.use(PivotViewPlugin);
export default {
data () {
return {
dataSource: {
data: [
{
"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 %}
To create Pivot Grid 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 Grid.
<script>
provide: {
pivotview: [GroupingBar, FieldList, CalculatedField]
}
</script>
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 views 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 Grid component.
<template>
<div id="app">
<ejs-pivotview :dataSource="dataSource" :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 {
dataSource: {
data: 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: 175,
showGroupingBar: true
}
},
provide: {
pivotview: [GroupingBar]
}
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
{% endraw %}
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 Grid component.
<template>
<div id="app">
<ejs-pivotview :dataSource="dataSource" :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 {
dataSource: {
data: 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: 250,
showFieldList: true
}
},
provide: {
pivotview: [FieldList]
}
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
{% endraw %}
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 calculatedFieldsSettings
property through code behind. The setting required for calculate 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 base 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 Grid component. Moreover calculated field is applicable only for value fields.
<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" :dataSource="dataSource" :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 {
dataSource: {
data: 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: [],
calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
},
height: 220,
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 %}
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.
<template>
<div id="app">
<ejs-pivotview :dataSource="dataSource" :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 {
dataSource: {
data: 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: [],
calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
},
showFieldList: true,
height: 250
}
},
provide: {
pivotview: [FieldList]
}
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
{% endraw %}