The virtual scrolling option allows you to load the large amounts of data without performance degradation by rendering rows and columns only in the content viewport. The data will refresh dynamically on vertical or horizontal scroll. This feature can be enabled by setting the enableVirtualization property to true.
To use the virtual scrolling feature, inject the VirtualScroll module in to the pivot table.
<template>
<div id="app">
<ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :enableVirtualization="enableVirtualization"> </ejs-pivotview>
</div>
</template>
<script>
import Vue from "vue";
import { PivotViewPlugin, VirtualScroll, IDataSet } from "@syncfusion/ej2-vue-pivotview";
Vue.use(PivotViewPlugin);
/* tslint:disable */
let date1: number;
let date2: number;
let isInit: boolean;
function data(count: number) {
let result: Object[] = [];
let dt: number = 0;
for (let i: number = 1; i < count + 1; i++) {
dt++;
let round: string;
let toString: string = i.toString();
if (toString.length === 1) {
round = "0000" + i;
} else if (toString.length === 2) {
round = "000" + i;
} else if (toString.length === 3) {
round = "00" + i;
} else if (toString.length === 4) {
round = "0" + i;
} else {
round = toString;
}
result.push({
ProductID: "PRO-" + round,
Year: "FY " + (dt + 2013),
Price: Math.round(Math.random() * 5000) + 5000,
Sold: Math.round(Math.random() * 80) + 10
});
if (dt / 4 == 1) {
dt = 0;
}
}
return result;
}
export default {
data () {
return {
dataSourceSettings: {
dataSource: data(1000) as IDataSet[],
enableSorting: false,
expandAll: true,
formatSettings: [{ name: 'Price', format: 'C0' }],
rows: [{ name: 'ProductID' }],
columns: [{ name: 'Year' }],
values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }]
},
height: 350,
enableVirtualization: true
}
},
provide: {
pivotview: [VirtualScroll]
}
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
{% endraw %}Limitations for virtual scrolling
columnWidth property in gridSettings should be in pixel and percentage values are not accepted.This property is applicable only for the relational data source.
When we bind one million raw data, the pivot table will process all raw data to generate aggregated data during initial rendering and report manipulation. But in data compression, the data will be compressed based on the uniqueness of the raw data, and unique records will be provided as input for the Pivot Table. The compressed data will be used for further operations at all times, reducing the looping complexity and improving the performance of the pivot table. For example, if the pivot table is connected to one million raw data aggregated to 1,000 unique data means, it will be rendered within 3 seconds rather than 10 seconds. You can enable this option by using the allowDataCompression property along with enableVirtualization property.
This options will only function when the virtual scrolling is enabled.
<template>
<div id="app">
<ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :allowDataCompression="allowDataCompression" :enableVirtualization="enableVirtualization"> </ejs-pivotview>
</div>
</template>
<script>
import Vue from "vue";
import { PivotViewPlugin, VirtualScroll, IDataSet } from "@syncfusion/ej2-vue-pivotview";
Vue.use(PivotViewPlugin);
/* tslint:disable */
let date1: number;
let date2: number;
let isInit: boolean;
function data(count: number) {
let result: Object[] = [];
let dt: number = 0;
for (let i: number = 1; i < count + 1; i++) {
dt++;
let round: string;
let toString: string = i.toString();
if (toString.length === 1) {
round = "0000" + i;
} else if (toString.length === 2) {
round = "000" + i;
} else if (toString.length === 3) {
round = "00" + i;
} else if (toString.length === 4) {
round = "0" + i;
} else {
round = toString;
}
result.push({
ProductID: 'PRO-' + (i % 1000),
Year: "FY " + (dt + 2013),
Price: Math.round(Math.random() * 5000) + 5000,
Sold: Math.round(Math.random() * 80) + 10
});
if (dt / 4 == 1) {
dt = 0;
}
}
return result;
}
export default {
data () {
return {
dataSourceSettings: {
dataSource: data(1000) as IDataSet[],
enableSorting: false,
expandAll: true,
formatSettings: [{ name: 'Price', format: 'C0' }],
rows: [{ name: 'ProductID' }],
columns: [{ name: 'Year' }],
values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }]
},
height: 350,
allowDataCompression: true,
enableVirtualization: true
}
},
provide: {
pivotview: [VirtualScroll]
}
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
{% endraw %}Limitations during data compression
Virtual scrolling automatically works with “Popup” field list on setting the enableVirtualization property in the Pivot Table to true. Incase of static field list, which act as a separate component, user need to enable enableVirtualization property in the Pivot Table and also pass the report information to pivot table instance via the load event of the field list.
<template>
<div id="app">
<ejs-pivotview id="pivotview_flist" :height="height" :gridSettings="gridSettings" :enginePopulated="enginePopulated" :width="width" :enableVirtualization="enableVirtualization"
></ejs-pivotview>
<ejs-pivotfieldlist id="pivotfieldlist1" :dataSourceSettings="dataSourceSettings" :enginePopulated="fieldEnginePopulated" :load="load" :dataBound="dataBound" :allowCalculatedField="allowCalculatedField" :renderMode="renderMode"
></ejs-pivotfieldlist>
</div>
</template>
<script>
import Vue from "vue";
import { PivotViewPlugin, PivotFieldListPlugin, FieldList, CalculatedField, VirtualScroll} from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';
Vue.use(PivotViewPlugin);
Vue.use(PivotFieldListPlugin);
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,
renderMode: "Fixed",
gridSettings: { columnWidth: 140 },
allowCalculatedField: true,
enableVirtualization: true,
width: "99%",
}
},
methods: {
fieldEnginePopulated: function() {
let fieldListObj = document.getElementById('pivotfieldlist1').ej2_instances[0];
let pivotGridObj = document.getElementById('pivotview_flist').ej2_instances[0];
fieldListObj.updateView(pivotGridObj);
},
dataBound: function () {
let pivotObj = document.getElementById('pivotview_flist').ej2_instances[0];
pivotObj.tooltip.destroy();
pivotObj.refresh();
},
load: function () {
let pivotObj = document.getElementById('pivotview_flist').ej2_instances[0];
let fieldListObj = document.getElementById('pivotfieldlist1').ej2_instances[0];
pivotObj.dataSourceSettings = fieldListObj.dataSourceSettings;
pivotObj.updatePageSettings(true);
fieldListObj.pageSettings = pivotObj.pageSettings;
},
enginePopulated: function () {
let pivotObj = document.getElementById('pivotview_flist').ej2_instances[0];
let fieldListObj = document.getElementById('pivotfieldlist1').ej2_instances[0];
if (fieldListObj && pivotObj) {
fieldListObj.update(pivotObj);
}
}
},
provide: {
pivotview: [CalculatedField, FieldList, VirtualScroll],
},
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
#pivotfieldlist1 {
width: 400px;
margin-top: 20px;
}
</style>
{% endraw %}