Allows to load the large amounts of data without any performance degradation by rendering rows and columns only in the current content viewport. Rest of the aggregated data will be brought into viewport dynamically based on vertical or horizontal scroll position. 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.
import { PivotViewComponent, VirtualScroll, Inject } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
let date1;
let date2;
function data(count) {
let result = [];
let dt = 0;
for (let i = 1; i < (count + 1); i++) {
dt++;
let round;
let toString = 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;
}
;
function App() {
let dataSourceSettings = {
dataSource: data(1000),
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' }]
};
let pivotObj;
return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} enableVirtualization={true} dataSourceSettings={dataSourceSettings}><Inject services={[VirtualScroll]}/></PivotViewComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { IDataOptions, IDataSet, PivotViewComponent, VirtualScroll, Inject } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
let date1: number;
let date2: number;
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;
};
function App() {
let dataSourceSettings: IDataOptions = {
dataSource: data(1000),
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' }]
}
let pivotObj: PivotViewComponent;
return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} enableVirtualization={true} dataSourceSettings={dataSourceSettings}><Inject services={[VirtualScroll]}/></PivotViewComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
The
height
andwidth
properties should be set for virtual scrolling. If it is not defined then the pivot table will consider its value as300px
and800px
respectively.
Limitations for virtual scrolling
columnWidth
property in gridSettings
should be in pixel and percentage values are not accepted.This property is applicable only for 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.
import { PivotViewComponent, VirtualScroll, Inject } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
let date1;
let date2;
function data(count) {
let result = [];
let dt = 0;
for (let i = 1; i < (count + 1); i++) {
dt++;
let round;
let toString = 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;
}
;
function App() {
let dataSourceSettings = {
dataSource: data(1000),
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' }]
};
let pivotObj;
return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} enableVirtualization={true} allowDataCompression={true} dataSourceSettings={dataSourceSettings}><Inject services={[VirtualScroll]}/></PivotViewComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { IDataOptions, IDataSet, PivotViewComponent, VirtualScroll, Inject } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
let date1: number;
let date2: number;
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;
};
function App() {
let dataSourceSettings: IDataOptions = {
dataSource: data(1000),
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' }]
}
let pivotObj: PivotViewComponent;
return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} enableVirtualization={true} allowDataCompression={true} dataSourceSettings={dataSourceSettings}><Inject services={[VirtualScroll]}/></PivotViewComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
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.
import { CalculatedField, PivotFieldListComponent, Inject, PivotViewComponent, VirtualScroll } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
const SAMPLE_CSS = `
.e-pivotview {
width: 58%;
height: 100%;
float: left;
}
.e-pivotfieldlist {
width: 42%;
height: 100%;
float: right;
}
.e-pivotfieldlist .e-static {
width: 100% !important;
}`;
function data(count) {
let result = [];
let dt = 0;
for (let i = 1; i < (count + 1); i++) {
dt++;
let round;
let toString = 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;
}
;
function App() {
let pivotGridModule;
let dataSourceSettings = {
dataSource: data(1000),
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' }]
};
let pivotObj;
let fieldListObj;
return (<div className="control-section">
<style>{SAMPLE_CSS}</style>
<PivotViewComponent id='PivotView' ref={d => pivotObj = d} enableVirtualization={true} enginePopulated={afterPivotPopulate.bind(this)} width={'99%'} height={'530'}><Inject services={[VirtualScroll]}/></PivotViewComponent>
<PivotFieldListComponent id='PivotFieldList' ref={d => fieldListObj = d} load={onLoad} enginePopulated={afterPopulate.bind(this)} dataSourceSettings={dataSourceSettings} renderMode={"Fixed"} allowCalculatedField={true}><Inject services={[CalculatedField]}/></PivotFieldListComponent></div>);
function afterPopulate() {
pivotObj = document.getElementById('PivotView').ej2_instances[0];
fieldListObj = document.getElementById('PivotFieldList').ej2_instances[0];
fieldListObj.updateView(pivotObj);
}
function afterPivotPopulate() {
pivotObj = document.getElementById('PivotView').ej2_instances[0];
fieldListObj = document.getElementById('PivotFieldList').ej2_instances[0];
fieldListObj.update(pivotObj);
}
function rendereComplete() {
fieldListObj.updateView(pivotObj);
fieldListObj.update(pivotObj);
}
function onLoad() {
//Getting component instance.
pivotObj = document.getElementById('PivotView').ej2_instances[0];
fieldListObj = document.getElementById('PivotFieldList').ej2_instances[0];
pivotGridModule = pivotObj;
//Assigning report to pivot table component.
pivotObj.dataSourceSettings = fieldListObj.dataSourceSettings;
//Generating page settings based on pivot table component’s size.
pivotObj.updatePageSettings(true);
//Assigning page settings to field list component.
fieldListObj.pageSettings = pivotObj.pageSettings;
}
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { CalculatedField, PivotFieldListComponent, IDataOptions, Inject, PivotViewComponent, VirtualScroll } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
const SAMPLE_CSS = `
.e-pivotview {
width: 58%;
height: 100%;
float: left;
}
.e-pivotfieldlist {
width: 42%;
height: 100%;
float: right;
}
.e-pivotfieldlist .e-static {
width: 100% !important;
}`;
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;
};
function App() {
let pivotGridModule;
let dataSourceSettings: IDataOptions = {
dataSource: data(1000),
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' }]
}
let pivotObj: PivotViewComponent;
let fieldListObj: PivotFieldListComponent;
return (<div className="control-section">
<style>{SAMPLE_CSS}</style>
<PivotViewComponent id='PivotView' ref={d => pivotObj = d} enableVirtualization={true} enginePopulated={afterPivotPopulate.bind(this)} width={'99%'} height={'530'}><Inject services={[VirtualScroll]}/></PivotViewComponent>
<PivotFieldListComponent id='PivotFieldList' ref={d => fieldListObj = d} load={onLoad} enginePopulated={afterPopulate.bind(this)} dataSourceSettings={dataSourceSettings} renderMode={"Fixed"} allowCalculatedField={true}><Inject services={[CalculatedField]} /></PivotFieldListComponent></div>);
function afterPopulate(): void {
pivotObj = document.getElementById('PivotView').ej2_instances[0];
fieldListObj = document.getElementById('PivotFieldList').ej2_instances[0];
fieldListObj.updateView(pivotObj);
}
function afterPivotPopulate(): void {
pivotObj = document.getElementById('PivotView').ej2_instances[0];
fieldListObj = document.getElementById('PivotFieldList').ej2_instances[0];
fieldListObj.update(pivotObj);
}
function rendereComplete(): void {
fieldListObj.updateView(pivotObj);
fieldListObj.update(pivotObj);
}
function onLoad(): void {
//Getting component instance.
pivotObj = document.getElementById('PivotView').ej2_instances[0];
fieldListObj = document.getElementById('PivotFieldList').ej2_instances[0];
pivotGridModule = pivotObj;
//Assigning report to pivot table component.
pivotObj.dataSourceSettings = fieldListObj.dataSourceSettings;
//Generating page settings based on pivot table component’s size.
pivotObj.updatePageSettings(true);
//Assigning page settings to field list component.
fieldListObj.pageSettings = pivotObj.pageSettings;
}
};
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));