Aggregates in React TreeGrid

8 Oct 20258 minutes to read

Aggregate values are displayed in the TreeGrid footer and in the parent row footer for child row aggregates. Configure aggregates using the aggregates property. The field and type properties are the minimum requirements to define an aggregate column.

To use aggregates, inject the Aggregate module.

By default, aggregate values can be shown in the TreeGrid footer and in child row footers. To display an aggregate inside a cell, use the footerTemplate.

The following video provides a quick start for aggregate functionalities:

Built-in aggregate types

Specify the aggregate type in the type property to configure an aggregate column.

The built-in aggregates are:

• Sum
• Average
• Min
• Max
• Count
• Truecount
• Falsecount

• Multiple aggregates can be configured for a single aggregate column by setting the type property with an array of types.
• Multiple types for a column are supported only when at least one aggregate template is used.

Child aggregate

Aggregate values for child rows are calculated and displayed in the parent row footer. Use the showChildSummary property to render child row aggregate values.

app.jsx

import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryRowData } from './datasource';
function App() {
    const footerSum = (props) => {
        return (<span>Minimum: {getObject('Min', props)}</span>);
    };
    const footerSum2 = (props) => {
        return (<span>Maximum: {getObject('Max', props)}</span>);
    };
    return <TreeGridComponent dataSource={summaryRowData} treeColumnIndex={0} childMapping='children' height='260'>
        <ColumnsDirective>
            <ColumnDirective field='FreightID' headerText='Freight ID' width='90' textAlign='Right'/>
            <ColumnDirective field='FreightName' headerText='Freight Name' width='195'/>
            <ColumnDirective field='UnitWeight' headerText='Weight Per Unit' width='130' textAlign='Right' type='number'/>
            <ColumnDirective field='TotalUnits' headerText='Total Units' type='number' width='125' textAlign='Right'/>
        </ColumnsDirective>
            <AggregatesDirective>
                <AggregateDirective showChildSummary={true}>
                    <AggregateColumnsDirective>
                        <AggregateColumnDirective field='TotalUnits' columnName='TotalUnits' type='Min' footerTemplate={footerSum}/>
                        <AggregateColumnDirective field='UnitWeight' columnName='UnitWeight' type='Max' footerTemplate={footerSum2}/>
                    </AggregateColumnsDirective>
                </AggregateDirective>
            </AggregatesDirective>
        <Inject services={[Aggregate]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { getObject } from '@syncfusion/ej2-grids';
import { Aggregate, AggregatesDirective, ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryRowData } from './datasource';

function App() {
    const footerSum = (props:object) => {
      return(<span>Minimum: {getObject('Min', props)}</span>)
    }

    const footerSum2 = (props: object) => {
        return(<span>Maximum: {getObject('Max', props)}</span>)
    }

    return <TreeGridComponent dataSource={summaryRowData} treeColumnIndex={0} childMapping='children' height='260'>
        <ColumnsDirective>
            <ColumnDirective field='FreightID' headerText='Freight ID' width='90' textAlign='Right'/>
            <ColumnDirective field='FreightName' headerText='Freight Name' width='195'/>
            <ColumnDirective field='UnitWeight' headerText='Weight Per Unit' width='130' textAlign='Right' type='number' />
            <ColumnDirective field='TotalUnits' headerText='Total Units' type='number' width='125' textAlign='Right' />
        </ColumnsDirective>
            <AggregatesDirective>
                <AggregateDirective showChildSummary={true}>
                    <AggregateColumnsDirective>
                        <AggregateColumnDirective field='TotalUnits' columnName='TotalUnits' type='Min'
                            footerTemplate={footerSum}/>
                        <AggregateColumnDirective field='UnitWeight' columnName='UnitWeight' type='Max'
                            footerTemplate={footerSum2}/>
                    </AggregateColumnsDirective>
                </AggregateDirective>
            </AggregatesDirective>
        <Inject services={[Aggregate]}/>
    </TreeGridComponent>
};
export default App;

Refer to the React TreeGrid feature tour page for feature highlights. Explore the React TreeGrid example to learn how to present and manipulate data.