Add custom aggregation type to JavaScript Pivotview component

22 Jan 20267 minutes to read

The Typescript Pivot Table component allows you to extend its functionality by adding custom aggregation types to the built-in aggregation menu. This enables you to implement specific calculation methods beyond the standard options like Sum, Average, Min, and Max.

Adding custom aggregation types

You can use the dataBound event to add your own custom aggregate types to the pivot table’s aggregate menu. This event fires after the pivot table has been fully rendered, making it the perfect spot to modify the component’s UI elements.

In the following example, we have added two custom aggregation types CustomAggregateType 1 (which calculates a weighted average) and CustomAggregateType 2 (which calculates the percentage of total) to the aggregate menu.

The calculation logic for these custom aggregation types is implemented using the aggregateCellInfo event. This event provides parameters including:

  • fieldName - Holds the current cell’s field name.
  • row - Holds the current cell’s row value.
  • column - Holds the current cell’s column value.
  • value - Holds the value of the current cell.
  • cellSets - Holds raw data for the aggregated value cell.
  • rowCellType - Holds the row cell type value.
  • columnCellType - Holds the column cell type value.
  • aggregateType - Holds the aggregate type of the cell.
  • skipFormatting - Boolean property that allows skipping formatting if applied.
import { PivotView, FieldList, IDataSet, AggregateTypes } from '@syncfusion/ej2-pivotview';
import { L10n } from '@syncfusion/ej2-base';
import { pivotData } from './datasource.ts';

PivotView.Inject(FieldList);
L10n.load({
     'en-US': {
          pivotview: {
               CustomAggregateType1: 'Custom Aggregate Type 1',
               CustomAggregateType2: 'Custom Aggregate Type 2',
          },
          pivotfieldlist: {
               CustomAggregateType1: 'Custom Aggregate Type 1',
               CustomAggregateType2: 'Custom Aggregate Type 2',
          }
     }
});
const SummaryType: string[] = [
     'Sum',
     'Count',
     'DistinctCount',
     'Avg',
     'CustomAggregateType1',
     'CustomAggregateType2'
];
let pivotObj: PivotView = new PivotView({
     dataSourceSettings: {
          expandAll: false,
          dataSource: pivotData as IDataSet[],
          columns: [{ name: 'Year' }, { name: 'Quarter' }],
          values: [{ name: 'Sold' }, { name: 'Amount' }],
          rows: [{ name: 'Country' }, { name: 'Products' }],
          formatSettings: [{ name: 'Amount', format: 'C0' }],
          subTotalsPosition: 'Bottom'
     },
     width: '100%',
     height: 300,
     showFieldList: true,
     dataBound: function () {
          pivotObj.getAllSummaryType = function () {
               return SummaryType as AggregateTypes[];
          };
          pivotObj.pivotFieldListModule.aggregateTypes = SummaryType as AggregateTypes[];
          pivotObj.pivotFieldListModule.getAllSummaryType = function () {
               return SummaryType as AggregateTypes[];
          };
     },
     aggregateCellInfo(args) {
          if (args.aggregateType === 'CustomAggregateType1') {
               args.value = args.value * 100;
          }
          if (args.aggregateType === 'CustomAggregateType2') {
               args.value = args.value / 100;
          }
     }
});
pivotObj.appendTo('#PivotTable');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>