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 %}