Aggregates in React Treegrid component

16 Sep 20238 minutes to read

Aggregate values are displayed in the TreeGrid footer and in parent row footer for child row aggregate values. It can be configured through aggregates property. field and type are the minimum properties required to represent an aggregate column.

To use the aggregate feature, you have to inject the Aggregate module.

By default, the aggregate value can be displayed in the treegrid footer, and footer of child rows. To show the aggregate value in one of the cells, use the footerTemplate.

To get start quickly with aggregates functionalities, you can check on this video:

Built-in aggregate types

The aggregate type should be specified 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 used for an aggregate column by setting the type property
  with an array of aggregate types.
• Multiple types for a column is supported only when one of the aggregate templates is used.

Child aggregate

Aggregate value is calculated for child rows, and it is displayed in the parent row footer. Use the showChildSummary property to render the child rows aggregate value.

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;

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our React Tree Grid example to knows how to present and manipulate data.