Footer aggregate in React TreeGrid

8 Oct 202512 minutes to read

Footer aggregate values are calculated across all rows and displayed in footer cells. Render footer aggregates using the footerTemplate property.

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='130'/>
            <ColumnDirective field='FreightName' headerText='Freight Name' width='180'/>
            <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={false}>
                <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='130'/>
            <ColumnDirective field='FreightName' headerText='Freight Name' width='180'/>
            <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={false}>
                <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;

Access aggregate values inside the template using their corresponding type name.

How to format aggregate value

Format the aggregate result using the format property.

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 { summaryData } from './datasource';
function App() {
    const footerSum = (props) => {
        return (<span>Total: {getObject('Sum', props)}</span>);
    };
    return <TreeGridComponent dataSource={summaryData} treeColumnIndex={0} childMapping='subtasks' height='260'>
          <ColumnsDirective>
              <ColumnDirective field='category' headerText='Category' width='160'/>
              <ColumnDirective field='units' headerText='Total Units' width='130' type='number' textAlign='Right'/>
              <ColumnDirective field='unitPrice' headerText='Unit Price($)' width='110' textAlign='Right' type='number' format='C2'/>
              <ColumnDirective field='price' headerText='Price($)' type='number' width='160' textAlign='Right' format='C2'/>
          </ColumnsDirective>
              <AggregatesDirective>
              <AggregateDirective showChildSummary={true}>
                  <AggregateColumnsDirective>
                  <AggregateColumnDirective field='price' columnName='price' type='Sum' footerTemplate={footerSum} format='C2'/>
                  </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 { summaryData } from './datasource';

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

      return <TreeGridComponent dataSource={summaryData} treeColumnIndex={0} childMapping='subtasks' height='260'>
          <ColumnsDirective>
              <ColumnDirective field='category' headerText='Category' width='160'/>
              <ColumnDirective field='units' headerText='Total Units' width='130' type='number' textAlign='Right'/>
              <ColumnDirective field='unitPrice' headerText='Unit Price($)' width='110' textAlign='Right' type='number' format='C2' />
              <ColumnDirective field='price' headerText='Price($)' type='number' width='160' textAlign='Right' format='C2' />
          </ColumnsDirective>
              <AggregatesDirective>
              <AggregateDirective showChildSummary={true}>
                  <AggregateColumnsDirective>
                  <AggregateColumnDirective field='price' columnName='price' type='Sum'
                      footerTemplate={footerSum} format='C2'/>
                  </AggregateColumnsDirective>
                  </AggregateDirective>
          </AggregatesDirective>
          <Inject services={[Aggregate]}/>
      </TreeGridComponent>
};
export default App;