Multiple Summary Values

[rsnell]

I'm trying to put together an app where the user wants to see both the total and average of a column. Is there a way to do this beyond having the column appear twice?

[Johnny Major]

We currently don’t have a way to show multiple summary values on a single column. However, you can work around this by setting the column’s summary type to total and then using a custom formatter (summary renderer) to calculate and display the average as well.


Here’s an example:

// If this is a summary row, calculate and display both the average and total
// when the store has records
if (summary && summary.isRow) {
    const totalCount = grid.getStore().getTotalCount();
    const average = totalCount > 0 ? v / totalCount : 0;

    if (average > 0) {
        const roundedAverage = Math.round(average * 100) / 100;

        // Display Average and Total with labels left-aligned and values right-aligned
        return `
            <div style="display:flex; justify-content:space-between; width:100%;">
                <span>Average:</span>
                <b>${roundedAverage}</b>
            </div>
            <div style="display:flex; justify-content:space-between; width:100%;">
                <span>Total:</span>
                <b>${v}</b>
            </div>
        `;
    }
    return v;
}
return v;