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 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.
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.
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!
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.
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 option in the Pivot Table, set the allowDataCompression property to true. Assume that we have bound the following report to the Pivot Table.
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:
For the Year field, we have:
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.
[
{
"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.
| Without Data Compression (in seconds) | With Data Compression (in seconds) | |
| Initial Rendering | 7 | 3 |
| Scrolling | 0.5 | 0.1 |
| Sorting | 0.5 | 0.1 |
| Filtering | 1.2 | 0.2 |
Note: Check out the stackblitz example of our React Pivot Table, which we built to collect the above statistics information.
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.
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.
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.
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.
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.
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.
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, ASP.NET(Core, MVC), JavaScript, Angular, React, and Vue 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 page. If you are not a Syncfusion customer yet, consider trying our 30-day free trial to explore the features.
For questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!
Thanks for reading!