Summaries

Summaries are one of the best features of Generic UI Grid. It allows the grid to calculate additional information about the presented data. One of the most popular summaries is 'average', which calculated the average value of all values presented in the column.

Summaries are calculated for columns of type number. Types of possible summary functions:

  • 'count',
  • 'distinct',
  • 'sum',
  • 'average',
  • 'min',
  • 'max',
  • 'median,
Example
grid.js
grid.html
users.js
$('#summaries').guiGrid({
	summaries: {
	    enabled: true
	},
	
	columns: [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Budget',
        field: 'budget',
        type: 'number',
        summaries: {
            enabled: true,
            summariesTypes: [
                'sum',
                'average',
                'min',
                'max'
            ]
        }
    }, {
        header: 'Training',
        field: 'training',
        type: 'number',
        width: 160,
        summaries: {
            enabled: true,
            summariesTypes: [
                'count',
                'distinct',
                'average',
                'median'
            ]
        }
    }]
	source: [...users]
})
<div id="summaries"></div>
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Searching, Editing

Summaries are calculated for data loaded by the grid. Presented summaries values are affected by all filtering transformations like searching, filtering, etc.

Changes made by the editing also modifies summaries data. So when user changes value, summaries are recalculated.

Example
grid.js
grid.html
users.js
$('#summaries-searching').guiGrid({
	summaries: {
	    enabled: true
	},
	searching: {
	    enabled: true
	},
	cellEditing: true,
	
	columns: [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Budget',
        field: 'budget',
        type: 'number',
        summaries: {
            enabled: true,
            summariesTypes: [
                'sum',
                'average',
                'min',
                'max'
            ]
        }
    }, {
        header: 'Training',
        field: 'training',
        type: 'number',
        width: 160,
        summaries: {
            enabled: true,
            summariesTypes: [
                'count',
                'distinct',
                'average',
                'median'
            ]
        }
    }]
	source: [...users]
})
<div id="summaries-searching"></div>
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Summaries - options

OptionsTypeDefaultDescription
summariesObject'enabled: false' Enables / disables summaries calculation for grid.

Column summaries - options

OptionsTypeDefaultDescription
enabledbooleanfalse Enables / disables summaries calculation for column.
summariesTypesArray<string>[] Types of calculations. Possible values:
  • 'count',
  • 'distinct',
  • 'sum',
  • 'average',
  • 'min',
  • 'max',
  • 'median,

Related articles:









We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.