Aggregates

The KendoReact Data Grid enables you to visualize the aggregates for the grouped data in the respective column group footer of the component.

To group the table data of the Grid, use its group and groupable options.

To integrate the available aggregates in the Grid:

  1. Select the desired GridGroupableSettings so that the Grid renders footers.
  2. In the cellRender method of the Grid, specify the way for displaying the aggregates.

For additional information, refer to the article on the process helpers for bulk data operations.

import React from 'react';
import ReactDOM from 'react-dom';

import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { process } from '@progress/kendo-data-query';

import products from './products.json';

class App extends React.PureComponent {
    aggregates = [
        { field: 'UnitsInStock', aggregate: 'sum' },
        { field: 'UnitPrice', aggregate: 'average' }
    ];

    state = this.createAppState({
        skip: 0,
        take: 10,
        group: [
            { field: 'UnitsInStock' }
        ]
    });

    render() {
        return (
            <Grid
                style={{ height: '520px' }}
                filterable={true}
                sortable={true}
                pageable={{ pageSizes: true }}
                groupable={{ footer: 'visible' }}

                data={this.state.result}
                {...this.state.dataState}
                onDataStateChange={this.dataStateChange}

                onExpandChange={this.expandChange}
                expandField="expanded"
                cellRender={this.cellRender}
            >
                <Column field="ProductID" filterable={false} title="ID" width="50px" />
                <Column field="ProductName" title="Product Name" />
                <Column field="UnitPrice" title="Unit Price" filter="numeric" />
                <Column field="UnitsInStock" title="Units In Stock" filter="numeric" />
                <Column field="Category.CategoryName" title="Category Name" />
            </Grid>
        );
    }

    createAppState(dataState) {
        const groups = dataState.group;
        if (groups) { groups.map(group => group.aggregates = this.aggregates); }

        return {
            result: process(products, dataState),
            dataState: dataState
        };
    }

    dataStateChange = (event) => {
        this.setState(this.createAppState(event.data));
    }

    expandChange = (event) => {
        event.dataItem[event.target.props.expandField] = event.value;
        this.setState({
            result: Object.assign({}, this.state.result),
            dataState: this.state.dataState
        });
    }

    cellRender(tdElement, cellProps) {
        if (cellProps.rowType === 'groupFooter') {
            if (cellProps.field === 'UnitPrice') {
                return (
                    <td>
                        Average: {cellProps.dataItem.aggregates.UnitPrice.average}
                    </td>
                );
            } else if (cellProps.field === 'UnitsInStock') {
                return (
                    <td>
                        Sum: {cellProps.dataItem.aggregates.UnitsInStock.sum}
                    </td>
                );
            }
        }
        return tdElement;
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /