React
Demos
Support
Forum
Download
Search results

Aggregation in React Pivot Table component

Users can perform calculations over a group of values using the aggregation option. By default, values are added together. The other aggregation types are explained in below section.

Aggregation through UI

Aggregation type can change simply with UI support, which option available in grouping bar and field list at run time.

Aggregation through code

It can be configured using type option for each value fields through code-behind. The settings required for summarize the value fields at initial rendering are:

  • type: It allows to set the aggregate type of the field.
  • baseField: It allows to set the base field to aggregate the values.
  • baseItem: It allows to set the base item to aggregate the values.

By default, the aggregation will be considered as Sum to the value fields which had number type and for the value fields which had string type, the aggregation type will be considered as Count. DifferenceFrom and PercentageOfDifferenceFrom can check for specific field of the specific item using baseField and baseItem. We can consider the PercentageOfParentTotal for specific field using baseField.

The following are the aggregate types used in value fields:

Operator Description
Sum Displays the pivot table values with sum.
Product Displays the pivot table values with product.
Count Displays the pivot table values with count.
DistinctCount Displays the pivot table values with distinct count.
Min Displays the pivot table with minimum value.
Max Displays the pivot table with maximum value.
Avg Displays the pivot table values with average.
Index Displays the pivot table values with index.
PopulationStDev Displays the pivot table values with standard deviation of population.
SampleStDev Displays the pivot table values with sample standard deviation.
PopulationVar Displays the pivot table values with variance of population.
SampleVar Displays the pivot table values with sample variance.
RunningTotals Displays the pivot table values with running totals.
DifferenceFrom Displays the pivot table values with difference from the value of the base item in the base field.
PercentageOfDifferenceFrom Displays the pivot table values with percentage difference from the value of the base item in the base field.
PercentageOfGrandTotal Displays the pivot table values with percentage of grand total of all values.
PercentageOfColumnTotal Displays the pivot table values in each column with percentage of total values for the column.
PercentageOfRowTotal Displays the pivot table values in each row with percentage of total values for the row.
PercentageOfParentTotal Displays the pivot table values with percentage of total of all values based on selected field.
PercentageOfParentColumnTotal Displays the pivot table values with percentage of its parent total in each column.
PercentageOfParentRowTotal Displays the pivot table values with percentage of its parent total in each row.
CalculatedField Displays the pivot table with calculated field values. It allows you to create a new calculated field alone.
Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    dataSource: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    drilledMembers: [{ name: 'Country', items: ['France'] }],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount', type: 'Sum' }]
  }
  public pivotObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings}></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            dataSource: pivotData,
            expandAll: false,
            filters: [],
            drilledMembers: [{ name: 'Country', items: ['France'] }],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount', type: 'Sum' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings}></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Previous
Next