Performance Optimization in React Pivot Table with Data Compression
Tags: react, development, syncfusion, web
Published: 2024-05-16 04:26:43

---
title: Performance Optimization in React Pivot Table with Data Compression
published: true
date: 2024-05-09 13:32:57 UTC
tags: react, development, syncfusion, web
canonical_url: https://www.syncfusion.com/blogs/post/performance-optimization-in-react-pivot-table
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vx4na33r35icrr57997.png
---
**TL;DR:** Discover the power of data compression in the Syncfusion React Pivot Table! Learn how this technique improves performance by compressing raw data based on uniqueness, resulting in faster processing and reduced complexity, especially with large data sets.

The Syncfusion [React Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table "Feature Tour: React Pivot Table") is an efficient control for organizing and summarizing business data, capable of displaying the results in a cross-table format. The data processed in real-time to generate a pivot table often reached the millions. By utilizing the data compression option, we can quickly analyze large amounts of data in the [React Pivot Table](https://ej2.syncfusion.com/react/documentation/pivotview/virtual-scrolling#data-compression "UG: React Pivot Table Virtual Scrolling"). 

It’s a technique within the Pivot Table that compresses raw data based on uniqueness. The compressed data is then utilized for subsequent operations, leading to a notable enhancement in performance, especially when the dataset contains fewer unique records.

## Why opt for data compression?

When binding a large data source, the Pivot Table will process all raw data to generate aggregated results for initial rendering and report manipulation.

In data compression, the raw data is compressed based on its uniqueness and used as input for the Pivot Table. The compressed data will be used for initial rendering and additional report manipulation options such as up-and-down drilling, filtering, sorting, editing, etc. It reduces loop complexity and improves pivot table performance.

Let me explain how it works!

## How does data compression work?

Consider, we have a JSON data source with 156 rows. Since displaying all 156 raw JSON data in the blog is not feasible, I’ll show just a few data for illustration purposes.

```js
    
let pivotData = [
  {
    'Sold': 31,
    'Amount': 52824,
    'Country': 'France',
    'Products': 'Mountain Bikes',
    'Year': 'FY 2015',
    'Quarter': 'Q1'
  },
  {
    'Sold': 51,
    'Amount': 86904,
    'Country': 'France',
    'Products': 'Mountain Bikes',
    'Year': 'FY 2015',
    'Quarter': 'Q2'
  },
  {
    'Sold': 90,
    'Amount': 153360,
    'Country': 'France',
    'Products': 'Mountain Bikes',
    'Year': 'FY 2015',
    'Quarter': 'Q3'
  },
  {
    'Sold': 25,
    'Amount': 42600,
    'Country': 'France',
    'Products': 'Mountain Bikes',
    'Year': 'FY 2015',
    'Quarter': 'Q4'
  }
];
```

When we render the Pivot Table with the above raw data, it will process all 156 raw data points to produce aggregated data based on the report we bound and displayed in the Pivot Table.

Let’s explore how the data compression technique works in our Pivot Table. To enable the [**Data Compression**](https://ej2.syncfusion.com/react/documentation/pivotview/virtual-scrolling#data-compression "UG: Data Compression") option in the Pivot Table, set the **[allowDataCompression](https://ej2.syncfusion.com/react/documentation/api/pivotview/#allowdatacompression "API Reference: allowDataCompression")** property to **true**. Assume that we have bound the following report to the Pivot Table.

```js
  
import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
let dataSourceSettings = {
    enableSorting: true,
    columns: [{ name: 'Year' }],
    rows: [{ name: 'Country' }],
    valueSortSettings: { headerDelimiter: ' - ' },
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
    dataSource: getPivotData(),
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    expandAll: false,
    filters: []
};
function Default() {
    return (<div className='control-pane'>
            <div className='control-section' style={{ overflow: 'auto' }}>
                <PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings} width={'100%'} height={'290'} gridSettings={{ columnWidth: 140 }} allowDataCompression={true}>
                </PivotViewComponent>
            </div>
        </div>);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);                    

```

When data compression is enabled, the assigned raw data will be compressed based on the uniqueness of the fields bound in the row and column axes of the React Pivot Table.

In the above code, you’ll see that we added the **Country** and **Year**  fields from the assigned input data to the row and column axes, respectively. Both fields have four unique values, as listed below:

For the **Country**  field, we have:

- France
- Germany
- United Kingdom
- United States

For the **Year**  field, we have:

- FY 2015
- FY 2016
- FY 2017
- FY 2018

When the Pivot Table starts up, the assigned raw data is compressed from 156 to 16 based on the header values in the bound row and column fields. Look at the compressed data below.

```js
 
[
  {
    "Sold": 729,
    "Amount": 1160099.5,
    "Country": "France",
    "Products": "Mountain Bikes",
    "Year": "FY 2015",
    "Quarter": "Q1"
  },
  {
    "Sold": 609,
    "Amount": 983317,
    "Country": "France",
    "Products": "Mountain Bikes",
    "Year": "FY 2016",
    "Quarter": "Q1"
  },
  {
    "Sold": 703,
    "Amount": 1140998,
    "Country": "France",
    "Products": "Mountain Bikes",
    "Year": "FY 2017",
    "Quarter": "Q1"
  },
  {
    "Sold": 68,
    "Amount": 108401.5,
    "Country": "France",
    "Products": "Mountain Bikes",
    "Year": "FY 2018",
    "Quarter": "Q1"
  },
  {
    "Sold": 528,
    "Amount": 845472,
    "Country": "Germany",
    "Products": "Road Bikes",
    "Year": "FY 2015",
    "Quarter": "Q1"
  },
  {
    "Sold": 667,
    "Amount": 1067220,
    "Country": "Germany",
    "Products": "Road Bikes",
    "Year": "FY 2016",
    "Quarter": "Q1"
  },
  {
    "Sold": 579,
    "Amount": 945569,
    "Country": "Germany",
    "Products": "Road Bikes",
    "Year": "FY 2017",
    "Quarter": "Q1"
  },
  {
    "Sold": 130,
    "Amount": 211902.5,
    "Country": "Germany",
    "Products": "Mountain Bikes",
    "Year": "FY 2018",
    "Quarter": "Q1"
  },
  {
    "Sold": 782,
    "Amount": 1263109.5,
    "Country": "United Kingdom",
    "Products": "Mountain Bikes",
    "Year": "FY 2015",
    "Quarter": "Q1"
  },
  {
    "Sold": 640,
    "Amount": 1031630.5,
    "Country": "United Kingdom",
    "Products": "Mountain Bikes",
    "Year": "FY 2016",
    "Quarter": "Q1"
  },
  {
    "Sold": 657,
    "Amount": 1041050.5,
    "Country": "United Kingdom",
    "Products": "Mountain Bikes",
    "Year": "FY 2017",
    "Quarter": "Q1"
  },
  {
    "Sold": 161,
    "Amount": 265366.5,
    "Country": "United Kingdom",
    "Products": "Mountain Bikes",
    "Year": "FY 2018",
    "Quarter": "Q1"
  },
  {
    "Sold": 682,
    "Amount": 1085398.5,
    "Country": "United States",
    "Products": "Road Bikes",
    "Year": "FY 2015",
    "Quarter": "Q1"
  },
  {
    "Sold": 480,
    "Amount": 770362,
    "Country": "United States",
    "Products": "Road Bikes",
    "Year": "FY 2016",
    "Quarter": "Q1"
  },
  {
    "Sold": 644,
    "Amount": 1022551.5, # This object remains unchanged
    "Country": "United States",
    "Products": "Road Bikes",
    "Year": "FY 2017",
    "Quarter": "Q1"
  },
  {
    "Sold": 232,
    "Amount": 366358,
    "Country": "United States",
    "Products": "Road Bikes",
    "Year": "FY 2018",
    "Quarter": "Q1"
  }
]

```

This compressed data is used for initial rendering and subsequent report manipulation operations within the React Pivot Table, significantly enhancing the Pivot Table’s performance. Data compression becomes more effective when there is a larger volume of raw data with fewer unique combinations.

For example, consider the Pivot Table, which is linked to one million raw data points aggregated into 1,000 unique combinations. The rendering time could be reduced to approximately 2-3 seconds, compared to 7-8 seconds without compression.

Check out the performance metrics for basic report manipulation operations after the implementation of data compression in the pivot table.
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;">
<p>Without Data Compression</p>
(in seconds)</td>
<td style="width: 33.3333%;">
<p>With Data Compression</p>
 (in seconds)</td>
</tr>
<tr>
<td style="width: 33.3333%;">Initial Rendering</td>
<td style="width: 33.3333%;">7</td>
<td style="width: 33.3333%;">3</td>
</tr>
<tr>
<td style="width: 33.3333%;">Scrolling</td>
<td style="width: 33.3333%;">0.5</td>
<td style="width: 33.3333%;">0.1</td>
</tr>
<tr>
<td style="width: 33.3333%;">Sorting</td>
<td style="width: 33.3333%;">0.5</td>
<td style="width: 33.3333%;">0.1</td>
</tr>
<tr>
<td style="width: 33.3333%;">Filtering</td>
<td style="width: 33.3333%;">1.2</td>
<td style="width: 33.3333%;">0.2</td>
</tr>
</tbody>
</table>

**Note**: Check out the [stackblitz](https://stackblitz.com/edit/react-ixqebt-fh25ag?file=index.js "Stackblitz: React Pivot Table") example of our React Pivot Table, which we built to collect the above statistics information.

## Points to remember while using data compression in React Pivot Table

While data compression is an effective method to boost data processing speed in Pivot Table, it is important to be aware of some limitations that can reduce its efficiency.

### Dealing with unique records of data

When we deal with a large amount of input data, specifically with minimal unique records available in the input data, the data compression performs exceptionally well.

However, the effectiveness of data compression diminishes when your input data consists entirely of unique records. In such circumstances, using data compression in Pivot Table is not recommended because the primary goal of data compression may not be achieved.

### Avoid frequent report manipulation during runtime

It is more beneficial when the report is not regularly manipulated during runtime, particularly for dynamically adding or removing fields between axes. For example, if we dynamically add new fields to the Pivot Table, the original data is compressed again according to the report. As a result, compressing the data based on the original raw data will require additional time.

Changing the aggregation type for value fields during runtime will follow a similar method. As a result, the change in aggregation may impact performance.

### Unsupported aggregation types

We recommend you avoid setting complex aggregation types such as  **Average**,  **Populationsdev**,  **Samplestdev**,  **Populationvar**, and  **Samplevar**  in the pivot report fields, as they may hinder the data compression process.

If these aggregation types are utilized, the result will default to the  **Sum**  aggregation type. This limitation is essential to consider when organizing compressed data for analytical purposes.

### Aggregation transformation for specific types 

The **Distinct**  **count** aggregation function behaves differently when data is compressed. Rather than maintaining its unique counting capability, it functions as a **Count** aggregation type. This alteration affects analytical results, and you must be aware of this transformation to interpret compressed data accurately.

### Calculated field dynamics 

When integrating an existing field into a calculated field, the inserted field’s default aggregation type remains the same. Even if the field’s default aggregation type is modified, the calculated field will revert to the original default aggregation type for calculations. This behavior ensures consistency and prevents unintended changes in the aggregation process.

## Conclusion

In conclusion, enhancing performance in React Pivot Table is essential for delivering high-quality web apps capable of managing large datasets efficiently. Developers can maintain responsive and high-performing pivot tables by exploring and implementing data compression techniques, even with substantial data volumes.

Our Pivot Table is also available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-pivot-table "Syncfusion Blazor Pivot Table"), ASP.NET([Core](https://www.syncfusion.com/aspnet-core-ui-controls/pivot-table "Syncfusion ASP .NET Core Pivot Table"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/pivot-table "Syncfusion ASP .NET CORE Pivot Table")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table "Syncfusion JavaScript Pivot Table"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-pivot-table "Syncfusion Angular Pivot Table"), [React](https://www.syncfusion.com/react-ui-components/react-pivot-table "Syncfusion React Pivot Table"), and [Vue](https://www.syncfusion.com/vue-ui-components/vue-pivot-table "Syncfusion Vue Pivot Table") component suites. It is designed to organize and summarize business data elegantly in any app!

For existing customers, the latest version of Essential Studio is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and Downloads") page. If you are not a Syncfusion customer yet, consider trying our 30-day [free trial](https://www.syncfusion.com/downloads "Free Trial") to explore the features.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Support Forum"), [support portal](https://support.syncfusion.com/ "Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Feedback Portal"). We are always happy to assist you!

Thanks for reading!

## Related blogs:

- [Easily Integrate the React Image Editor into the Rich Text Editor](https://www.syncfusion.com/blogs/post/integrate-react-image-editor-into-rich-text-editor "Blog: Easily Integrate the React Image Editor into the Rich Text Editor")
- [Using React 18 Features in NextJS](https://www.syncfusion.com/blogs/post/using-react-18-features-in-nextjs "Blog: Using React 18 Features in NextJS")
- [Video-Calling React App with Agora and Syncfusion](https://www.syncfusion.com/blogs/post/video-calling-react-app-with-agora-and-syncfusion "Blog: Video-Calling React App with Agora and Syncfusion")
- [Easily Group Data into Ranges in Web Applications Using Pivot Table](https://www.syncfusion.com/blogs/post/easily-group-data-into-ranges-in-web-applications-using-pivot-table "Blog: Easily Group Data into Ranges in Web Applications Using Pivot Table")