v7.3.0

Summary
Feature

Displays a summary row in the grid footer.

On each column you can specify the type of sum, available types are:

Type Description
sum Sum of all values in the column
add Alias for sum
count Number of rows
countNotEmpty Number of rows containing a value
average Average of all values in the column
function A custom function, used with store.reduce. Should take arguments (sum, record)

Columns can also specify a summaryRenderer to format the calculated sum.

This feature is disabled by default.

{ text : 'Score', data : 'score', width : 80, sum : 'sum' }
{ text : 'Rank', data : 'rank', width : 80, sum : 'average', summaryRenderer: ({ sum }) => return 'Average rank ' + sum }

Also, it is possible to set up multiple summaries as array of summary configs:

{ text : 'Rank', data : 'rank', summaries : [{ sum : 'average', label : 'Average' }, { sum : 'count', label : 'Count' }] }

When Store has lazyLoad, this feature will only work on locally available data

See also

  • GroupSummary - Summary rows within groups
  • sum - Per-column summary config
No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isSummary : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of Summary class, or subclass thereof.

Functions

Functions are methods available for calling on the class
    • onStoreChange( )
      private

      Updates summaries on store changes (except record update, handled below)

    • refresh( )

      Refreshes the summaries

    • refreshSummaries( )
      private

      Updates summaries. Summaries are displayed as tables in footer (styling left out to keep brief):

      <table>
    <tr><td colspan="2">0</td></tr> // { sum : 'min' } Only a calculation, span entire table
    <tr><td>Max</td><td>10</td></tr> // { sum : 'max', label: 'Max' } Label + calculation
    <tr><td>Max</td><td>10</td></tr> // { sum : 'sum', label: 'Max' } Label + calculation
</table>

    Type definitions

    id: summary

    Source path

    Grid/feature/Summary.js

    Demo

    examples/features

    Contents