Best practices to improve the performance of the Pivot Table

16 Sep 202524 minutes to read

Performance optimization is crucial when working with large datasets in the Syncfusion^® React Pivot Table. This documentation provides some best practices to empower your data analysis and enhance the user experience.

How do I improve the loading performance of the Pivot Table?

When working with large datasets, you can use the following options to improve the loading performance of the Pivot Table and provide a smoother user experience.

Virtual scrolling

Virtual scrolling improves the performance of the Pivot Table when working with large datasets by only displaying the rows and columns that are currently visible in the viewport. This approach reduces initial load time and memory usage, as the control processes only the data currently in view. As you scroll vertically or horizontally, additional data loads automatically in the background. For detailed guidance on implementing virtual scrolling in the Pivot Table, see the virtual scrolling documentation.

Paging

Paging helps you display large datasets efficiently by breaking them into smaller, manageable pages instead of loading all data at once. When your browser’s maximum pixel height prevents you from using the Pivot Table with virtual scrolling, the paging option provides an excellent alternative. This approach significantly improves loading performance and ensures smooth navigation through your data.

To enable paging in your Pivot Table, set the allowPaging property to true and configure the pageSettings to control the number of records displayed per page. For implementation details, refer to the paging documentation.

Server-side engine

Connecting your application to an external service for fetching a large dataset (referred to as input data), such as one million records for the Pivot Table, may take considerable time due to network bandwidth limitations when transmitting data from server-side to client-side.

Therefore, we highly recommend using our server-side engine for rendering the Pivot Table with a large amount of data instead of the built-in engine.

Typically, in this approach, the Pivot Table component and its report are defined and often modified on the client-side (browser), while the pivot engine is implied and hosted in a dedicated web service (Web API) known as the server-side engine. Here, the server-side engine can directly connect to your data source, swiftly collect the input data (referred to as input raw data), and, based on the provided report by the Pivot Table through UI interactions periodically, the server-side engine performs all pivot-oriented calculations internally. It then transmits only aggregated data for Pivot Table display to the client-side (browser). This approach minimizes network bandwidth usage and enhances Pivot Table rendering.

In case a large amount of aggregated data is sent to the client-side from the web service (Web API), the server-side engine offers the option to enable virtual scrolling or paging. This feature generates aggregated data exclusively for the current viewport of the Pivot Table, further optimizing network bandwidth and rendering performance.

Additionally, the cache concept is implemented in the server-side engine to hold the pivot engine’s instance based on the end-user GUID. This allows for quick retrieval, calculation, and re-sending of modified pivot data to the Pivot Table viewport, based on the UI action performed.

For more information on implementing the server-side engine in the Pivot Table, please refer to the documentation here.

How can I enhance the performance of the Pivot Table through data operations?

Data compression

If your input data (referred to as input raw data) contains a large number of repeated records, the data compression option becomes particularly useful.

In this approach, based on the pivot report defined in the data source settings and with the data compression option enabled, all the input data is initially iterated. Repetitive records are then summarized, reducing the overall input data for all further pivot calculations. For example, if there are 1000 records with 400 records being repeated, data compression will clean up and result in 600 unique records for every future pivot calculations. Now, consider the impact with one million records and how useful it will be.

The limitation here is that during the initial rendering of the Pivot Table alone, data compression will work by taking slightly extra time to summarize and reduce overall input data. However, for subsequent uses, it will be very quick, with reduced input data. Nevertheless, it is more advantageous since it’s a one-time process.

Additionally, it works with the virtual scrolling or paging option enabled as well.

NOTE

If your input data has very few repeated records, we would not suggest this option.

For more information on implementing the data compression in the Pivot Table, you can refer to the documentation here.

Defer layout update

The Defer Layout Update feature in the Pivot Table allows end-users to perform various operations, such as adding, removing, and rearranging fields, filtering, sorting, changing aggregation types, and more, without immediately updating the Pivot Table. The efficiency of this process lies in allowing end-users to complete their modifications. The final application of these changes occurs when end-users click the Apply button in the Field List UI. This action triggers the Pivot Table to update based on the last modified report. By deferring the layout update until precisely requested, the React Pivot Table remains unchanged initially, ensuring minimal resource utilization and avoiding frequent re-rendering until the end-user explicitly applies the modifications.

For more information on defer layout updates, you can refer to the documentation here.

Sorting

During the initial rendering phase, applying sorting to fields other than the string data type, particularly those with a large number of members, may lead to increased processing time for the pivot engine due to internal calculations. To enhance performance without compromising the final outcome, it is advisable to refrain from using sorting options at this stage. Alternatively, load the input raw data into the data source settings in the desired order for display in the Pivot Table.

Once the input raw data is arranged as needed and the Pivot Table is rendered, it is recommended to restrict the use of sorting operations for runtime performance optimization. This approach ensures efficient processing and responsive performance while still achieving the desired presentation in the Pivot Table.

Member filtering

When working with large datasets, it’s beneficial to set a display limit for members in the filter dialog UI. This allows the filter dialog to quickly show members up to the specified limit without facing performance issues. If there are more members beyond this limit, a message displaying the count of remaining members will appear at the bottom of the filter dialog UI. End users can then access the remaining members using the search option provided in the filter dialog during runtime. For detailed instructions on implementing the node limit in the filter dialog UI, refer to the documentation linked here.

Grouping

Using the Pivot Table’s built-in grouping feature to group date, number, and string data type fields is not often recommended.

Here is an example below of how the groupSettings tag has been used to configure grouping for the available fields using code-behind. The date and number grouping have been set to the fields “Date” and “Id”, respectively.

It obviously impacts the overall performance during Pivot Table rendering because it always consumes the input raw data, splits, redefines, and provides modified input raw data based on the fields in the report that will be used for further pivot calculations.

App.jsx

import { GroupingBar, Grouping, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import { Group_Data } from './datasource';
function App() {
    let dataSourceSettings = {
        dataSource: Group_Data,
        expandAll: false,
        enableSorting: true,
        columns: [{ name: 'Product_ID', caption: 'Product ID' }],
        rows: [{ name: 'Date', caption: 'Date' }],
        values: [
            { name: 'Sold', caption: 'Unit Sold' },
            { name: 'Amount', caption: 'Sold Amount' },
        ],
        formatSettings: [{ name: 'Amount', format: 'C' }],
        groupSettings: [
            { name: 'Product_ID', type: 'Number', rangeInterval: 3 },
            {
                name: 'Date',
                type: 'Date',
                groupInterval: ['Years', 'Months'],
                startingAt: new Date(2015, 6, 1),
                endingAt: new Date(2017, 6, 31),
            },
        ],
        filters: []
    };
    let pivotObj;
    return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} showGroupingBar={true} allowGrouping={true}><Inject services={[GroupingBar, Grouping]} /></PivotViewComponent>);
};
export default App;

App.tsx

import { GroupingBar, Grouping, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import * as React from 'react';
import { Group_Data } from './datasource';

function App() {

  let dataSourceSettings: DataSourceSettingsModel = {
    dataSource: Group_Data as IDataSet[],
    expandAll: false,
    enableSorting: true,
    columns: [{ name: 'Product_ID', caption: 'Product ID' }],
    rows: [{ name: 'Date', caption: 'Date' }],
    values: [
      { name: 'Sold', caption: 'Unit Sold' },
      { name: 'Amount', caption: 'Sold Amount' },
    ],
    formatSettings: [{ name: 'Amount', format: 'C' }],
    groupSettings: [
      { name: 'Product_ID', type: 'Number', rangeInterval: 3 },
      {
        name: 'Date',
        type: 'Date',
        groupInterval: ['Years', 'Months'],
        startingAt: new Date(2015, 6, 1),
        endingAt: new Date(2017, 6, 31),
      },
    ],
    filters: [],
  }
  let pivotObj: PivotViewComponent;
  
  return (<PivotViewComponent  ref={ (d: PivotViewComponent) => pivotObj = d } id='PivotView' height={350} dataSourceSettings={dataSourceSettings} showGroupingBar={true} allowGrouping={true}><Inject services={[GroupingBar, Grouping]}/></PivotViewComponent>);
};

export default App;

datasource.jsx

var gData = [
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1001,
        'Sold': 2
    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1002,
        'Sold': 3
    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1003,
        'Sold': 5
    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Bikes',
        'Product_ID': 1004,
        'Sold': 1
    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Bikes',
        'Product_ID': 1005,
        'Sold': 1
    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Clothings',
        'Product_ID': 1007,
        'Sold': 2
    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Clothings',
        'Product_ID': 1008,
        'Sold': 1
    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Clothings',
        'Product_ID': 1009,
        'Sold': 3
    },
    {
        'Date': '1/5/2015 20:19:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1003,
        'Sold': 3
    },
    {
        'Date': '2/2/2015 10:22:07 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1002,
        'Sold': 4
    },
    {
        'Date': '2/10/2015 10:23:07 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1002,
        'Sold': 1
    },
    {
        'Date': '12/2/2018 16:05:33 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1003,
        'Sold': 3
    }
];

var Group_Data = getGroupData(gData);
function getGroupData(data) {
    var date;
    var products = ['', 'Bottles and Cages', 'Cleaners', 'Fenders', 'Mountain Bikes', 'Road Bikes', 'Touring Bikes', 'Gloves', 'Jerseys', 'Shorts', 'Vests'];
    var amount = [0, 2, 3, 8, 60, 75, 65, 3, 5, 4, 2];
    for (var ln = 0, lt = data.length; ln < lt; ln++) {
        date = new Date(data[ln].Date.toString());
        data[ln].Date = date.toString();
        data[ln].Products = products[data[ln].Product_ID - 1000];
        data[ln].Sold = data[ln].Sold * (date.getFullYear() === 2015 ? 3 : date.getFullYear() === 2016 ? 4 : date.getFullYear() === 2017 ? 2 : 5);
        data[ln].Amount = ((date.getFullYear() === 2018 ? 2 : 0) + data[ln].Sold) * amount[data[ln].Product_ID - 1000];
    }
    return data;
}

datasource.tsx

export let gData: Object[] = [
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1001,
        'Sold': 2

    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1002,
        'Sold': 3

    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1003,
        'Sold': 5

    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Bikes',
        'Product_ID': 1004,
        'Sold': 1

    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Bikes',
        'Product_ID': 1005,
        'Sold': 1

    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Clothings',
        'Product_ID': 1007,
        'Sold': 2

    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Clothings',
        'Product_ID': 1008,
        'Sold': 1

    },
    {
        'Date': '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Clothings',
        'Product_ID': 1009,
        'Sold': 3
    },
    {
        'Date': '2/2/2015 10:22:07 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Bikes',
        'Product_ID': 1005,
        'Sold': 2

    },
    {
        'Date': '2/10/2015 10:23:07 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Bikes',
        'Product_ID': 1006,
        'Sold': 4
    },
    {
        'Date': '9/1/2015 04:14:43 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Bikes',
        'Product_ID': 1004,
        'Sold': 1
    },
    
    {
        'Date': '9/29/2015 05:14:43 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Clothings',
        'Product_ID': 1009,
        'Sold': 3
    },
    {
        'Date': '9/05/2015 05:14:43 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Bikes',
        'Product_ID': 1004,
        'Sold': 2
    },
    {
        'Date': '9/12/2015 04:14:43 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1001,
        'Sold': 3
    },
    {
        'Date': '9/25/2015 04:15:43 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1002,
        'Sold': 2
    },
    {
        'Date': '9/29/2015 05:14:43 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Clothings',
        'Product_ID': 1008,
        'Sold': 7
    },
    {
        'Date': '1/3/2016 17:26:11 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1002,
        'Sold': 5

    },
    {
        'Date': '1/4/2016 15:26:11 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1001,
        'Sold': 4

    },
    {
        'Date': '1/5/2016 17:30:11 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1002,
        'Sold': 3

    },
    {
        'Date': '1/8/2016 07:26:11 GMT+0530 (India Standard Time)',
        'Product_Categories': 'Accessories',
        'Product_ID': 1003,
        'Sold': 2

    },
];

export let Group_Data: Object[] = getGroupData(gData);

function getGroupData(data: any): Object[] {
    let date: Date;
    let products: string[] = ['', 'Bottles and Cages', 'Cleaners', 'Fenders', 'Mountain Bikes', 'Road Bikes', 'Touring Bikes', 'Gloves', 'Jerseys', 'Shorts', 'Vests'];
    let amount: number[] = [0, 2, 3, 8, 60, 75, 65, 3, 5, 4, 2]
    for (let ln: number = 0, lt: number = data.length; ln < lt; ln++) {
        date = new Date(data[ln].Date.toString());
        data[ln].Date = date.toString();
        data[ln].Products = products[data[ln].Product_ID - 1000];
        data[ln].Sold = data[ln].Sold * (date.getFullYear() === 2015 ? 3 : date.getFullYear() === 2016 ? 4 : date.getFullYear() === 2017 ? 2 : 5);
        data[ln].Amount = ((date.getFullYear() === 2018 ? 2 : 0) + data[ln].Sold) * amount[data[ln].Product_ID - 1000];
    }
    return data as Object[];
}

To avoid this performance constraint, we recommend passing the input raw data along with pre-processed group field sets based on your grouping needs. For example, if your input raw data has a date field “Date” with the value “15/AUG/2019 03:41 PM” and you want to display it as the year and month alone, split out the date field as “Date_Year” = “15/AUG/2019” for the year and “Date_Month” = “15/AUG/2019” for the month. Further use the formatSettings property to show these date fields with the chosen date format. Similarly, to group a number field, just alter its value based on your requirements (e.g., 1–5, 6–10).

Here’s an example below of configuring grouping in your input raw data and assigning it to the Pivot Table’s data source. In the code below, the fields “Date_Year,” “Date_Month,” and “Id” are created and updated in the provided input raw data and have been specified for the date and number grouping. Additionally, the date formatting has been applied to these specified date group fields using the formatSettings.

App.jsx

import { GroupingBar, Grouping, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import { gData } from './datasource';
function App() {
    let dataSourceSettings = {
        dataSource: gData,
        expandAll: false,
        enableSorting: true,
        columns: [{ name: 'Product_ID', caption: 'Product ID' }],
        rows: [
            { name: 'Date_Year', caption: 'Year' },
            { name: 'Date_Month', caption: 'Month' },
        ],
        values: [
            { name: 'Sold', caption: 'Unit Sold' },
            { name: 'Amount', caption: 'Sold Amount' },
        ],
        formatSettings: [
            { name: 'Amount', format: 'C' },
            { name: 'Date_Year', type: 'date_year', format: 'yyyy' },
            { name: 'Date_Month', type: 'date_month', format: 'MMM' },
        ],
        filters: [],
    };
    let pivotObj;
    return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} showGroupingBar={true} allowGrouping={true}><Inject services={[GroupingBar, Grouping]}/></PivotViewComponent>);
};
export default App;

App.tsx

import { GroupingBar, Grouping, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import * as React from 'react';
import { gData } from './datasource';

function App() {

  let dataSourceSettings: DataSourceSettingsModel = {
    dataSource: gData as IDataSet[],
    expandAll: false,
        enableSorting: true,
        columns: [{ name: 'Product_ID', caption: 'Product ID' }],
        rows: [
            { name: 'Date_Year', caption: 'Year' },
            { name: 'Date_Month', caption: 'Month' },
        ],
        values: [
            { name: 'Sold', caption: 'Unit Sold' },
            { name: 'Amount', caption: 'Sold Amount' },
        ],
        formatSettings: [
            { name: 'Amount', format: 'C' },
            { name: 'Date_Year', type: 'date_year', format: 'yyyy' },
            { name: 'Date_Month', type: 'date_month', format: 'MMM' },
        ],
        filters: [],
  }
  let pivotObj: PivotViewComponent;
  
  return (<PivotViewComponent  ref={ (d: PivotViewComponent) => pivotObj = d } id='PivotView' height={350} dataSourceSettings={dataSourceSettings} showGroupingBar={true} allowGrouping={true}><Inject services={[GroupingBar, Grouping]}/></PivotViewComponent>);
};

export default App;

datasource.jsx

export let gData= [
    {
        Date_Month: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Accessories',
        Product_ID: 1001,
        Sold: 95,
        Amount: 161880,
    },
    {
        Date_Month: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Accessories',
        Product_ID: 1002,
        Sold: 31,
        Amount: 52824,
    },
    {
        Date_Month: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Accessories',
        Product_ID: 1003,
        Sold: 51,
        Amount: 86904,
    },
    {
        Date_Month: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1001,
        Sold: 90,
        Amount: 153360,
    },
    {
        Date_Month: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1002,
        Sold: 25,
        Amount: 42600,
    },
    {
        Date_Month: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Clothings',
        Product_ID: 1003,
        Sold: 27,
        Amount: 46008,
    },
    {
        Date_Month: '1/1/2017 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2017 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Clothings',
        Product_ID: 1001,
        Sold: 49,
        Amount: 83496,
    },
    {
        Date_Month: '1/1/2017 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2017 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Clothings',
        Product_ID: 1002,
        Sold: 48,
        Amount: 71957,
    },
    {
        Date_Month: '1/5/2017 20:19:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/5/2017 20:19:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Accessories',
        Product_ID: 1003,
        Sold: 93,
        Amount: 139412,
    },
    {
        Date_Month: '1/5/2018 20:19:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/5/2018 20:19:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1004,
        Sold: 83,
        Amount: 124422,
    },
    {
        Date_Month: '2/2/2018 10:22:07 GMT+0530 (India Standard Time)',
        Date_Year: '2/2/2018 10:22:07 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1003,
        Sold: 75,
        Amount: 127800,
    },
    {
        Date_Month: '2/10/2018 10:23:07 GMT+0530 (India Standard Time)',
        Date_Year: '2/10/2018 10:23:07 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1002,
        Sold: 67,
        Amount: 114168,
    },
    {
        Date_Month: '1/5/2018 20:19:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/5/2018 20:19:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Clothings',
        Product_ID: 1001,
        Sold: 27,
        Amount: 46008,
    },
];

datasource.tsx

export let gData: Object[] = [
    {
        Date_Month: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Accessories',
        Product_ID: 1001,
        Sold: 95,
        Amount: 161880,
    },
    {
        Date_Month: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Accessories',
        Product_ID: 1002,
        Sold: 31,
        Amount: 52824,
    },
    {
        Date_Month: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2015 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Accessories',
        Product_ID: 1003,
        Sold: 51,
        Amount: 86904,
    },
    {
        Date_Month: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1001,
        Sold: 90,
        Amount: 153360,
    },
    {
        Date_Month: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1002,
        Sold: 25,
        Amount: 42600,
    },
    {
        Date_Month: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2016 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Clothings',
        Product_ID: 1003,
        Sold: 27,
        Amount: 46008,
    },
    {
        Date_Month: '1/1/2017 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2017 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Clothings',
        Product_ID: 1001,
        Sold: 49,
        Amount: 83496,
    },
    {
        Date_Month: '1/1/2017 20:18:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/1/2017 20:18:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Clothings',
        Product_ID: 1002,
        Sold: 48,
        Amount: 71957,
    },
    {
        Date_Month: '1/5/2017 20:19:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/5/2017 20:19:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Accessories',
        Product_ID: 1003,
        Sold: 93,
        Amount: 139412,
    },
    {
        Date_Month: '1/5/2018 20:19:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/5/2018 20:19:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1004,
        Sold: 83,
        Amount: 124422,
    },
    {
        Date_Month: '2/2/2018 10:22:07 GMT+0530 (India Standard Time)',
        Date_Year: '2/2/2018 10:22:07 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1003,
        Sold: 75,
        Amount: 127800,
    },
    {
        Date_Month: '2/10/2018 10:23:07 GMT+0530 (India Standard Time)',
        Date_Year: '2/10/2018 10:23:07 GMT+0530 (India Standard Time)',
        Product_Categories: 'Bikes',
        Product_ID: 1002,
        Sold: 67,
        Amount: 114168,
    },
    {
        Date_Month: '1/5/2018 20:19:15 GMT+0530 (India Standard Time)',
        Date_Year: '1/5/2018 20:19:15 GMT+0530 (India Standard Time)',
        Product_Categories: 'Clothings',
        Product_ID: 1001,
        Sold: 27,
        Amount: 46008,
    },
];

Value filtering

The value filtering primarily operates on grand totals, meaning the filtering process considers entire rows and columns to match applied value conditions. For similar results with more flexibility and better performance, consider exploring our label filtering or member filtering options. These alternatives can yield comparable outcomes, particularly when dealing with large datasets. You can find more information on utilizing the label filtering or member filtering options in the documentation section dedicated to these features.

How do I improve the scrolling performance of the Pivot Table?

Virtual scrolling with single page mode

By default, the Pivot Table with virtual scrolling renders not only the current view page but also the previous and next pages. However, by using single-page mode along with virtual scrolling, only the rows and columns relevant to the current view page are rendered. This optimization significantly enhances the scrolling performance of the Pivot Table. For more information on implementing this feature, you can refer to the documentation here.

Limiting the component size

Displaying too many rows and columns in a Pivot Table at once can slow performance and increase memory usage. To keep the Pivot Table responsive, set a specific height and width for the Pivot Table, such as 600px by 1000px. This limits the number of rows and columns loaded in the current view. When setting these values, render only the Pivot Table, excluding the grouping bar, toolbar, and other additional UI elements.

NOTE

Normally, pixel units are preferred, ensuring more accurate page calculations compared to using percentage units, which involve additional computations for determining page as well as row and column sizes.