Aggregation
ZingGrid has default behaviors for calculating the average, count, min, max, and sum values for a given column or row. These aggregation values are displayed in a row or column, respectively, in the grid.
Aggregate Column
Display the average of a column by setting the column type to "aggregate" and specifying typeAggregateValue to "avg" (average):
<zg-column type="aggregate" type-aggregate-value="avg"></zg-column>
For a list of aggregate methods available for typeAggregateValue, check out the Aggregate Methods section.
Specify or Omit Columns
By default, all number-like column types (currency, date, number, etc...) are included in calculating the value of an aggregate column.
To specify which columns to include in the calculations, set the index attribute to a list of column indices.
<zg-column index="test1, test2, test3" type="aggregate" type-aggregate-value="avg"></zg-column>
Alternatively, add typeAggregateOmit to the column(s) to omit from the aggregate calculation.
<zg-column index="id" type-aggregate-omit></zg-column> <zg-column index="test1, test2, test3" type="aggregate" type-aggregate-value="avg"></zg-column>
Custom Renderer
To customize the aggregate column, specify renderer to the name of your custom renderer function.
The function definition of the renderer should be function(recordData, aggregateData, aggreateValue).
<zg-column index="exampleIndexName" type="aggregate" type-aggregate-value="avg" renderer="myCustomRenderer"></zg-column>
Aggregate Row
Aggregate can also be displayed as a row.
Display the average of a column's values in the footer with footCell:
<zg-column index="exampleIndexName" foot-cell="avg"></zg-column>
Or display the average in the header with headCell:
<zg-column index="exampleIndexName" head-cell="avg"></zg-column>
For a list of aggregate methods available for footCell and headCell, check out the Aggregate Methods section.
Aggregate Grand Total
To display the grand total, enable both aggregate columns and rows. The grand total is displayed in the head and/or foot cells of the aggregate columns.
<zg-column type="aggregate" type-aggregate-value="avg" foot-cell="avg"></zg-column>
Aggregate Methods
Here are a list of aggregate methods available to set for typeAggregateValue (column), headCell or footCell.
Average
Display the average value of a column in the footer, like so:
<zg-column index="exampleIndexName" foot-cell="avg"></zg-column>
Here is a complete grid with the average of each column calculated in the grid's footer:
Count
Display the count value of a column in the footer, like so:
<zg-column index="exampleIndexName" foot-cell="count"></zg-column>
Here is a complete grid with the number of rows containing data calculated for each column in the grid's footer:
Min
Display the minimum value of a column in the footer, like so:
<zg-column index="exampleIndexName" foot-cell="min"></zg-column>
Here is a complete grid displaying the lowest value of each column in the grid's footer:
Max
Display the maximum value of a column in the footer, like so:
<zg-column index="exampleIndexName" foot-cell="max"></zg-column>
Sum
Display the sum total of a column's values in the footer, like so:
<zg-column index="exampleIndexName" foot-cell="sum"></zg-column>
Tokenized String
Display custom text with the aggregate value using a tokenized string. The tokens represent the aggregate value. Specify an aggregate value by placing the aggregate method between double brackets, like so:
<zg-column index="exampleIndexName" foot-cell="Average change (percentage): [[avg]]"></zg-column>
Custom Method
Display an aggregate value based on your own custom aggregate method. Specify the aggregate method by the function name, like so:
<zg-column index="exampleIndexName" foot-cell="myCustomMethod"></zg-column>
Related Resources
Here are some extra resources related to this feature to help with creating your grid:
[features: aggregation]