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 type-aggregate-value to "avg" (average):
<zg-column type="aggregate" type-aggregate-value="avg"></zg-column>
For a list of aggregate methods available for type-aggregate-value, 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 type-aggregate-omit 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 foot-cell:
<zg-column index="exampleIndexName" foot-cell="avg"></zg-column>
Or display the average in the header with head-cell:
<zg-column index="exampleIndexName" head-cell="avg"></zg-column>
For a list of aggregate methods available for foot-cell and head-cell, 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 Totals Field
To display the aggregate of all numeric values of the grid, use the aggregate column with head-cell or foot-cell.
Omit type-aggregate-value, which returns the aggregate of the columns and rows.
<zg-column type="aggregate" foot-cell="avg"></zg-column>
Aggregate Methods
Here are a list of aggregate methods available to set for type-aggregate-value (column), head-cell or foot-cell.
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]