Syncfusion AI Assistant

How can I help you?

Aggregates in React Grid Component

14 Feb 202624 minutes to read

The Aggregates feature in Syncfusion® React Grid provides built-in calculations such as sum, average, count, minimum, and maximum for specific columns. The results can be displayed in different sections of the grid.

  • Footer: overall summary values for the entire grid.
  • Group Footer: aggregate values for each group of records.
  • Group Caption: summary information shown alongside the group title.

The aggregate feature is enabled by importing the Aggregate module from @syncfusion/ej2-react-grids and injecting the Aggregate service into the grid.

import { GridComponent, Inject, Aggregate } from '@syncfusion/ej2-react-grids';

<GridComponent>
  <Inject services={[Aggregate]} />
</GridComponent>

Aggregates in the React Grid are linked to columns using a few key properties:

  • field: Defines the field name of the column on which the aggregation is performed. The value must match the column’s data source field.
  • type: Defines the type of aggregate calculation for the column.for example Sum, Average, Min, Max, or Count.
  • Templates: Decide where the result is displayed in the grid in footerTemplate, groupFooterTemplate, groupCaptionTemplate.
  • format: Applies formatting to numeric and date columns when displaying aggregate values.
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Aggregate } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateColumnDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
<GridComponent dataSource={data}>
  <ColumnsDirective>
    <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' width='150' />
  </ColumnsDirective>
  <AggregatesDirective>
    <AggregateDirective>
      <AggregateColumnsDirective>
        <AggregateColumnDirective field='Freight' type='Sum' format='C2' footerTemplate={footerSum} />
      </AggregateColumnsDirective>
    </AggregateDirective>
  </AggregatesDirective>
  <Inject services={[Aggregate]} />
</GridComponent>

Directives for aggregate configuration:

  • AggregatesDirective: Root container for all aggregate definitions.
  • AggregateDirective: Defines one aggregate row (can contain multiple columns).
  • AggregateColumnsDirective: Wraps one or more aggregate column definitions.
  • AggregateColumnDirective: Defines a single aggregate for a specific field and type.

Aggregates can also be integrated using the aggregates property of the grid instead of using directives. For example:

const aggregate = [
  {
    columns: [
      {
        type: 'Max',
        field: 'Freight',
        format: 'C2',
        footerTemplate: 'Max:${Max}',
      },
    ],
  },
];
<GridComponent dataSource={data} aggregates={aggregate} >
  <ColumnsDirective>
    <ColumnDirective field="Freight" headerText="Freight" width="150" format="C2" />
  </ColumnsDirective>
  <Inject services={[Aggregate]} />
</GridComponent>

Displaying aggregate values

By default, aggregate values are shown in the footer, group footer, and group caption cells. The display of aggregate values can be configured to appear in any one of these cells, or enabled in all, by using the following properties:

import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate, Group, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
  const groupOptions = {
    columns: ['ShipCountry'],
    showDropArea: false
  };
  const footerSum = (props) => {
    return (<span>Sum: {props.Sum}</span>);
  };
  const footerMax = (props) => {
    return (<span>Max: {props.Max}</span>);
  };
  return (<GridComponent dataSource={data} allowPaging={true} allowGrouping={true} groupSettings={groupOptions} height={268}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
      <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
      <ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' textAlign='Right' width='150' />
      <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' width='150' />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
    </ColumnsDirective>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Sum' format='C2' groupFooterTemplate={footerSum} />
        </AggregateColumnsDirective>
      </AggregateDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Max' format='C2' groupCaptionTemplate={footerMax} />
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[Page, Aggregate, Group]} />
  </GridComponent>);
}
export default App;
import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate, Group, GroupSettingsModel, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
  const groupOptions: GroupSettingsModel = {
    columns: ['ShipCountry'],
    showDropArea: false
  };
  const footerSum = (props) => {
    return (<span>Sum: {props.Sum}</span>)
  }
  const footerMax = (props) => {
    return (<span>Max: {props.Max}</span>)
  }
  return (<GridComponent dataSource={data} allowPaging={true} allowGrouping={true}
    groupSettings={groupOptions} height={268}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
      <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
      <ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' textAlign='Right' width='150' />
      <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' width='150' />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
    </ColumnsDirective>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Sum' format='C2' groupFooterTemplate={footerSum} />
        </AggregateColumnsDirective>
      </AggregateDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Max' format='C2' groupCaptionTemplate={footerMax} />
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[Page, Aggregate, Group]} />
  </GridComponent>)
}
export default App;
export let data = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }
];
export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }];

Custom formatting for aggregate values

A custom template can be defined to control how the aggregate value is displayed. For example, instead of showing just the raw number, labels, formatting, or styling can be applied.

const footerSum = (props) => {
  const value= props.Sum; 
  const style = { color: value > 1000 ? 'green' : 'red' }; 
  return <span style={style}>Total Freight: ${value.toFixed(2)}</span>;
};

The aggregate type Sum by default displays the raw value (e.g., “1234.56”) in the footer, but with a custom template it shows “Total Freight: $1234.56” and applies green color if greater than 1000, or red color if 1000 or less.

import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
  const footerSum = (props) => {
    const value= props.Sum; 
    const style = { color: value > 1000 ? 'green' : 'red' }; 
    return <span style={style}>Total Freight: ${value.toFixed(2)}</span>;
  };
  return (<GridComponent dataSource={data} allowPaging={true} height={260}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
      <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
      <ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' textAlign='Right' width='150' />
      <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' width='150' />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
    </ColumnsDirective>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Sum' footerTemplate={footerSum} />
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[Page, Aggregate]} />
  </GridComponent>);
}
export default App;
import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {;
  const footerSum = (props) => {
    const value= props.Sum; 
    const style = { color: value > 1000 ? 'green' : 'red' }; 
    return <span style={style}>Total Freight: ${value.toFixed(2)}</span>;
  };
  return (<GridComponent dataSource={data} allowPaging={true} height={260}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
      <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
      <ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' textAlign='Right' width='150' />
      <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' width='150' />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
    </ColumnsDirective>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Sum' footerTemplate={footerSum} />
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[Page, Aggregate]} />
  </GridComponent>)
}
export default App;
export let data = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }
];
export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }];

Aggregate using local and remote data

  • Local data: Since all rows are already loaded into the grid, the total summary is always calculated across the entire dataset.
  • Remote data: The grid only loads one page of records at a time. By default, the total summary is calculated for the current page only. To display total summaries for the entire dataset, the server must return these fields in its response:
    • result: the current page of records.
    • count: the total number of records after filtering.
    • aggregate: the calculated aggregate values for the entire dataset.

    For example:

         {
   "result": [ /* Paged array of records */ ],
   "count": 500,          // Total records after filtering.
   "aggregate": {         // Aggregate values for the entire dataset.
     "Freight - Sum": 12345.67,
     "Freight - Average": 456.78
   }
 }

Built-in aggregate types

The Syncfusion React Grid supports the following built-in aggregate types that can be specified in the type property:

  • Sum: Calculates the total of all values in the column.
  • Average: Calculates the mean of all values.
  • Min: Returns the smallest value.
  • Max: Returns the largest value.
  • Count: Counts the total number of records.
  • TrueCount: Counts the number of true values in the column.
  • FalseCount: Counts the number of false values in the column.

Here is an example that demonstrates how to use built-in aggregate types in the grid:

import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Group, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
  const groupSettings = { showDropArea: false, columns: ['ShipCountry'] };
  const freightTemplate = (props) => {
    return (<span>Average: {props.Average}</span>)
  }
  const shippedDateTemplate = (props) => {
    return (<span>Max: {(new Date(props.Max)).toLocaleDateString()}</span>)
  }
  const orderDateTemplate = (props) => {
    return (<span>Min:{(new Date(props.Min)).toLocaleDateString()}</span>)
  }
  const verifiedTemplate = (props) => {
    return (<span>TrueCount: {props.TrueCount}</span>)
  }
  return (<GridComponent dataSource={data} height={268} allowGrouping={true} groupSettings={groupSettings}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
      <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
      <ColumnDirective field='OrderDate' headerText='Order Date' type='date' width='150' textAlign='Right' format='yMd' />
      <ColumnDirective field='ShippedDate' headerText='Shipped Date' type='date' width='150' textAlign='Right' format='yMd' />
      <ColumnDirective field='Freight' headerText='Freight' width='150' textAlign='Right' format='C2' />
      <ColumnDirective field='isVerified' headerText='Verified' width='150' type='boolean'  displayAsCheckBox="true" />
      <ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
    </ColumnsDirective>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Average' format='C2' footerTemplate={freightTemplate} />
          <AggregateColumnDirective field='ShippedDate' type='Max' footerTemplate={shippedDateTemplate} />
          <AggregateColumnDirective field='OrderDate' type='Min' footerTemplate={orderDateTemplate} />
          <AggregateColumnDirective field='isVerified' type='TrueCount' footerTemplate={verifiedTemplate} />
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[Aggregate, Group]} />
  </GridComponent>)
}
export default App;
import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Group, GroupSettingsModel, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
  const groupSettings: GroupSettingsModel = { showDropArea: false, columns: ['ShipCountry'] };
  const freightTemplate = (props) => {
    return (<span>Average: {props.Average}</span>)
  }
  const shippedDateTemplate = (props) => {
    return (<span>Max: {(new Date(props.Max)).toLocaleDateString()}</span>)
  }
  const orderDateTemplate = (props) => {
    return (<span>Min:{(new Date(props.Min)).toLocaleDateString()}</span>)
  }
  const verifiedTemplate = (props) => {
    return (<span>TrueCount: {props.TrueCount}</span>)
  }
  return (<GridComponent dataSource={data} height={268} allowGrouping={true} groupSettings={groupSettings}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
      <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
      <ColumnDirective field='OrderDate' headerText='Order Date' type='date' width='150' textAlign='Right' format='yMd' />
      <ColumnDirective field='ShippedDate' headerText='Shipped Date' type='date' width='150' textAlign='Right' format='yMd' />
      <ColumnDirective field='Freight' headerText='Freight' width='150' textAlign='Right' format='C2' />
      <ColumnDirective field='isVerified' headerText='Verified' width='150' type='boolean'  displayAsCheckBox="true" />
      <ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
    </ColumnsDirective>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Average' format='C2' footerTemplate={freightTemplate} />
          <AggregateColumnDirective field='ShippedDate' type='Max' footerTemplate={shippedDateTemplate} />
          <AggregateColumnDirective field='OrderDate' type='Min' footerTemplate={orderDateTemplate} />
          <AggregateColumnDirective field='isVerified' type='TrueCount' footerTemplate={verifiedTemplate} />
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[Aggregate, Group]} />
  </GridComponent>)
}
export default App;
export let data = [
    {
        OrderID: 10248,
        CustomerID: 'VINET',
        OrderDate: '1996-07-04T00:00:00.000Z',
        ShippedDate: '1996-07-16T00:00:00.000Z',
        Freight: 32.38,
        ShipName: 'Vins et alcools Chevalier',
        ShipAddress: "59 rue de l'Abbaye",
        ShipCity: 'Reims',
        ShipRegion: null,
        isVerified:true,
        ShipCountry: 'France',
    },

    {
        OrderID: 10249,
        CustomerID: 'TOMSP',
        OrderDate: '1996-07-05T00:00:00.000Z',
        ShippedDate: '1996-07-10T00:00:00.000Z',
        Freight: 11.61,
        ShipName: 'Toms Spezialitäten',
        ShipAddress: 'Luisenstr. 48',
        ShipCity: 'Münster',
        ShipRegion: null,
        isVerified:false,
        ShipCountry: 'Germany',
    },

    {
        OrderID: 10250,
        CustomerID: 'HANAR',
        OrderDate: '1996-07-08T00:00:00.000Z',
        ShippedDate: '1996-07-12T00:00:00.000Z',
        Freight: 65.83,
        ShipName: 'Hanari Carnes',
        ShipAddress: 'Rua do Paço, 67',
        ShipCity: 'Rio de Janeiro',
        ShipRegion: 'RJ',
        isVerified:true,
        ShipCountry: 'Brazil',
    },

    {
        OrderID: 10251,
        CustomerID: 'VICTE',
        OrderDate: '1996-07-08T00:00:00.000Z',
        ShippedDate: '1996-07-15T00:00:00.000Z',
        Freight: 41.34,
        ShipName: 'Victuailles en stock',
        ShipAddress: '2, rue du Commerce',
        ShipCity: 'Lyon',
        ShipRegion: null,
        isVerified:true,
        ShipCountry: 'France',
    },

    {
        OrderID: 10252,
        CustomerID: 'SUPRD',
        OrderDate: '1996-07-09T00:00:00.000Z',
        ShippedDate: '1996-07-11T00:00:00.000Z',
        Freight: 51.3,
        ShipName: 'Suprêmes délices',
        ShipAddress: 'Boulevard Tirou, 255',
        ShipCity: 'Charleroi',
        isVerified:true,
        ShipRegion: null,
        ShipCountry: 'Belgium',
    },

    {
        OrderID: 10253,
        CustomerID: 'HANAR',
        OrderDate: '1996-07-10T00:00:00.000Z',
        ShippedDate: '1996-07-16T00:00:00.000Z',
        Freight: 58.17,
        ShipName: 'Hanari Carnes',
        ShipAddress: 'Rua do Paço, 67',
        ShipCity: 'Rio de Janeiro',
        ShipRegion: 'RJ',
        isVerified:true,
        ShipCountry: 'Brazil',
    },

    {
        OrderID: 10254,
        CustomerID: 'CHOPS',
        OrderDate: '1996-07-11T00:00:00.000Z',
        ShippedDate: '1996-07-23T00:00:00.000Z',
        Freight: 22.98,
        ShipName: 'Chop-suey Chinese',
        ShipAddress: 'Hauptstr. 31',
        ShipCity: 'Bern',
        ShipRegion: null,
        isVerified:false,
        ShipCountry: 'Switzerland',
    },

    {
        OrderID: 10255,
        CustomerID: 'RICSU',
        OrderDate: '1996-07-12T00:00:00.000Z',
        ShippedDate: '1996-07-15T00:00:00.000Z',
        Freight: 148.33,
        ShipName: 'Richter Supermarkt',
        ShipAddress: 'Starenweg 5',
        ShipCity: 'Genève',
        ShipRegion: null,
        isVerified:true,
        ShipCountry: 'Switzerland',
    },

    {
        OrderID: 10256,
        CustomerID: 'WELLI',
        OrderDate: '1996-07-15T00:00:00.000Z',
        ShippedDate: '1996-07-17T00:00:00.000Z',
        Freight: 13.97,
        ShipName: 'Wellington Importadora',
        ShipAddress: 'Rua do Mercado, 12',
        ShipCity: 'Resende',
        ShipRegion: 'SP',
        isVerified:true,
        ShipCountry: 'Brazil',
    },

    {
        OrderID: 10257,
        CustomerID: 'HILAA',
        OrderDate: '1996-07-16T00:00:00.000Z',
        ShippedDate: '1996-07-22T00:00:00.000Z',
        Freight: 81.91,
        isVerified:true,
        ShipName: 'HILARION-Abastos',
        ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipCity: 'San Cristóbal',
        ShipRegion: 'Táchira',
        ShipCountry: 'Venezuela',
    },

    {
        OrderID: 10258,
        CustomerID: 'ERNSH',
        OrderDate: '1996-07-17T00:00:00.000Z',
        ShippedDate: '1996-07-23T00:00:00.000Z',
        Freight: 140.51,
        ShipName: 'Ernst Handel',
        ShipAddress: 'Kirchgasse 6',
        ShipCity: 'Graz',
        ShipRegion: null,
        isVerified:false,
        ShipCountry: 'Austria',
    },

    {
        OrderID: 10259,
        CustomerID: 'CENTC',
        OrderDate: '1996-07-18T00:00:00.000Z',
        ShippedDate: '1996-07-25T00:00:00.000Z',
        Freight: 3.25,
        ShipName: 'Centro comercial Moctezuma',
        ShipAddress: 'Sierras de Granada 9993',
        ShipCity: 'México D.F.',
        ShipRegion: null,
        isVerified:true,
        ShipCountry: 'Mexico',
    },

    {
        OrderID: 10260,
        CustomerID: 'OTTIK',
        OrderDate: '1996-07-19T00:00:00.000Z',
        ShippedDate: '1996-07-29T00:00:00.000Z',
        Freight: 55.09,
        ShipName: 'Ottilies Käseladen',
        ShipAddress: 'Mehrheimerstr. 369',
        ShipCity: 'Köln',
        ShipRegion: null,
        isVerified:false,
        ShipCountry: 'Germany',
    },

    {
        OrderID: 10261,
        CustomerID: 'QUEDE',
        OrderDate: '1996-07-19T00:00:00.000Z',
        ShippedDate: '1996-07-30T00:00:00.000Z',
        Freight: 3.05,
        ShipName: 'Que Delícia',
        ShipAddress: 'Rua da Panificadora, 12',
        ShipCity: 'Rio de Janeiro',
        ShipRegion: 'RJ',
        isVerified:true,
        ShipCountry: 'Brazil',
    },

    {
        OrderID: 10262,
        CustomerID: 'RATTC',
        OrderDate: '1996-07-22T00:00:00.000Z',
        ShippedDate: '1996-07-25T00:00:00.000Z',
        Freight: 48.29,
        isVerified:true,
        ShipName: 'Rattlesnake Canyon Grocery',
        ShipAddress: '2817 Milton Dr.',
        ShipCity: 'Albuquerque',
        ShipRegion: 'NM',
        ShipCountry: 'USA',
    },
];
export let data: Object[] = [
    {
        OrderID: 10248,
        CustomerID: 'VINET',
        OrderDate: '1996-07-04T00:00:00.000Z',
        ShippedDate: '1996-07-16T00:00:00.000Z',
        Freight: 32.38,
        ShipName: 'Vins et alcools Chevalier',
        ShipAddress: "59 rue de l'Abbaye",
        ShipCity: 'Reims',
        ShipRegion: null,
        isVerified:true,
        ShipCountry: 'France',
    },

    {
        OrderID: 10249,
        CustomerID: 'TOMSP',
        OrderDate: '1996-07-05T00:00:00.000Z',
        ShippedDate: '1996-07-10T00:00:00.000Z',
        Freight: 11.61,
        ShipName: 'Toms Spezialitäten',
        ShipAddress: 'Luisenstr. 48',
        ShipCity: 'Münster',
        ShipRegion: null,
        isVerified:false,
        ShipCountry: 'Germany',
    },

    {
        OrderID: 10250,
        CustomerID: 'HANAR',
        OrderDate: '1996-07-08T00:00:00.000Z',
        ShippedDate: '1996-07-12T00:00:00.000Z',
        Freight: 65.83,
        ShipName: 'Hanari Carnes',
        ShipAddress: 'Rua do Paço, 67',
        ShipCity: 'Rio de Janeiro',
        ShipRegion: 'RJ',
        isVerified:true,
        ShipCountry: 'Brazil',
    },

    {
        OrderID: 10251,
        CustomerID: 'VICTE',
        OrderDate: '1996-07-08T00:00:00.000Z',
        ShippedDate: '1996-07-15T00:00:00.000Z',
        Freight: 41.34,
        ShipName: 'Victuailles en stock',
        ShipAddress: '2, rue du Commerce',
        ShipCity: 'Lyon',
        ShipRegion: null,
        isVerified:true,
        ShipCountry: 'France',
    },

    {
        OrderID: 10252,
        CustomerID: 'SUPRD',
        OrderDate: '1996-07-09T00:00:00.000Z',
        ShippedDate: '1996-07-11T00:00:00.000Z',
        Freight: 51.3,
        ShipName: 'Suprêmes délices',
        ShipAddress: 'Boulevard Tirou, 255',
        ShipCity: 'Charleroi',
        isVerified:true,
        ShipRegion: null,
        ShipCountry: 'Belgium',
    },

    {
        OrderID: 10253,
        CustomerID: 'HANAR',
        OrderDate: '1996-07-10T00:00:00.000Z',
        ShippedDate: '1996-07-16T00:00:00.000Z',
        Freight: 58.17,
        ShipName: 'Hanari Carnes',
        ShipAddress: 'Rua do Paço, 67',
        ShipCity: 'Rio de Janeiro',
        ShipRegion: 'RJ',
        isVerified:true,
        ShipCountry: 'Brazil',
    },

    {
        OrderID: 10254,
        CustomerID: 'CHOPS',
        OrderDate: '1996-07-11T00:00:00.000Z',
        ShippedDate: '1996-07-23T00:00:00.000Z',
        Freight: 22.98,
        ShipName: 'Chop-suey Chinese',
        ShipAddress: 'Hauptstr. 31',
        ShipCity: 'Bern',
        ShipRegion: null,
        isVerified:false,
        ShipCountry: 'Switzerland',
    },

    {
        OrderID: 10255,
        CustomerID: 'RICSU',
        OrderDate: '1996-07-12T00:00:00.000Z',
        ShippedDate: '1996-07-15T00:00:00.000Z',
        Freight: 148.33,
        ShipName: 'Richter Supermarkt',
        ShipAddress: 'Starenweg 5',
        ShipCity: 'Genève',
        ShipRegion: null,
        isVerified:true,
        ShipCountry: 'Switzerland',
    },

    {
        OrderID: 10256,
        CustomerID: 'WELLI',
        OrderDate: '1996-07-15T00:00:00.000Z',
        ShippedDate: '1996-07-17T00:00:00.000Z',
        Freight: 13.97,
        ShipName: 'Wellington Importadora',
        ShipAddress: 'Rua do Mercado, 12',
        ShipCity: 'Resende',
        ShipRegion: 'SP',
        isVerified:true,
        ShipCountry: 'Brazil',
    },

    {
        OrderID: 10257,
        CustomerID: 'HILAA',
        OrderDate: '1996-07-16T00:00:00.000Z',
        ShippedDate: '1996-07-22T00:00:00.000Z',
        Freight: 81.91,
        isVerified:true,
        ShipName: 'HILARION-Abastos',
        ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipCity: 'San Cristóbal',
        ShipRegion: 'Táchira',
        ShipCountry: 'Venezuela',
    },

    {
        OrderID: 10258,
        CustomerID: 'ERNSH',
        OrderDate: '1996-07-17T00:00:00.000Z',
        ShippedDate: '1996-07-23T00:00:00.000Z',
        Freight: 140.51,
        ShipName: 'Ernst Handel',
        ShipAddress: 'Kirchgasse 6',
        ShipCity: 'Graz',
        ShipRegion: null,
        isVerified:false,
        ShipCountry: 'Austria',
    },

    {
        OrderID: 10259,
        CustomerID: 'CENTC',
        OrderDate: '1996-07-18T00:00:00.000Z',
        ShippedDate: '1996-07-25T00:00:00.000Z',
        Freight: 3.25,
        ShipName: 'Centro comercial Moctezuma',
        ShipAddress: 'Sierras de Granada 9993',
        ShipCity: 'México D.F.',
        ShipRegion: null,
        isVerified:true,
        ShipCountry: 'Mexico',
    },

    {
        OrderID: 10260,
        CustomerID: 'OTTIK',
        OrderDate: '1996-07-19T00:00:00.000Z',
        ShippedDate: '1996-07-29T00:00:00.000Z',
        Freight: 55.09,
        ShipName: 'Ottilies Käseladen',
        ShipAddress: 'Mehrheimerstr. 369',
        ShipCity: 'Köln',
        ShipRegion: null,
        isVerified:false,
        ShipCountry: 'Germany',
    },

    {
        OrderID: 10261,
        CustomerID: 'QUEDE',
        OrderDate: '1996-07-19T00:00:00.000Z',
        ShippedDate: '1996-07-30T00:00:00.000Z',
        Freight: 3.05,
        ShipName: 'Que Delícia',
        ShipAddress: 'Rua da Panificadora, 12',
        ShipCity: 'Rio de Janeiro',
        ShipRegion: 'RJ',
        isVerified:true,
        ShipCountry: 'Brazil',
    },

    {
        OrderID: 10262,
        CustomerID: 'RATTC',
        OrderDate: '1996-07-22T00:00:00.000Z',
        ShippedDate: '1996-07-25T00:00:00.000Z',
        Freight: 48.29,
        isVerified:true,
        ShipName: 'Rattlesnake Canyon Grocery',
        ShipAddress: '2817 Milton Dr.',
        ShipCity: 'Albuquerque',
        ShipRegion: 'NM',
        ShipCountry: 'USA',
    },
];

Multiple aggregates for a column

A grid column typically supports a single aggregate function such as Sum, Average, or Count, which produces one summary value for the entire column. In cases where different summary values are required at the same time, multiple aggregates can be configured. This feature makes it possible to calculate and display several values such as Sum, Average, Minimum, Maximum, or custom calculations concurrently for a specific column.

In the Syncfusion® React Grid, multiple aggregates can be defined in two ways:

  • By specifying the aggregate type as an array, which allows multiple values to be shown together in a single summary row. For example: 
    const aggregate = [{ 
  columns: [ 
    { type: ['Sum', 'Max', 'Min'], // Multiple aggregates in one row. 
      field: 'Freight', 
      format: 'C2', 
      footerTemplate: 'Sum: ${Sum}, Min:${Min}, Max:${Max}'
    } 
  ] 
}];
  • By defining separate AggregateDirective elements, each containing an AggregateColumnDirective with its own type. In this case, each aggregate is rendered in its own summary row in the footer.

Here’s an example of how to use multiple aggregates in the grid:

import { ColumnDirective, ColumnsDirective, GridComponent, Inject, AggregateColumnsDirective, AggregateColumnDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
  const footerSum = (props) => {
    return (<span>Sum: {props.Sum}</span>)
  }
  const footerMax = (props) => {
    return (<span>Max: {props.Max}</span>)
  }
  const footerMin = (props) => {
    return (<span>Min: {props.Min}</span>)
  }
  return (<GridComponent dataSource={data} allowPaging={true} height={170} >
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
      <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
      <ColumnDirective field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right'/>
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
    </ColumnsDirective>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Sum' format='C2' footerTemplate={footerSum} />
        </AggregateColumnsDirective>
      </AggregateDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Max' format='C2' footerTemplate={footerMax} />
        </AggregateColumnsDirective>
      </AggregateDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Min' footerTemplate={footerMin} format='N' /> 
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[Page, Aggregate]} />
  </GridComponent>)
}
export default App;
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, AggregateColumnsDirective, AggregateColumnDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
  const footerSum = (props) => {
    return (<span>Sum: {props.Sum}</span>)
  }
  const footerMax = (props) => {
    return (<span>Max: {props.Max}</span>)
  }
  const footerMin = (props) => {
    return (<span>Min: {props.Min}</span>)
  }
  return (<GridComponent dataSource={data} allowPaging={true} height={170}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
      <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
      <ColumnDirective field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right'/>
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
    </ColumnsDirective>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Sum' format='C2' footerTemplate={footerSum} />
        </AggregateColumnsDirective>
      </AggregateDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Max' format='C2' footerTemplate={footerMax} />
        </AggregateColumnsDirective>
      </AggregateDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='Freight' type='Min' footerTemplate={footerMin} format='N' /> 
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[Page, Aggregate]} />
  </GridComponent>)
}
export default App;
export let data = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }
];
export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }];

See also