{"componentChunkName":"component---src-templates-doc-page-jsx","path":"/vue-data-grid/aggregation/","result":{"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When grouping, you can apply an aggregation function to any column to populate the group row with values.\nYou can pick from the grid's built in aggregation functions or provide your own."}]},{"type":"element","tagName":"h2","properties":{"id":"defining-aggregations","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#defining-aggregations","ariaLabel":"defining aggregations permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Defining Aggregations"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can define aggregations on columns in the following three ways:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Built-In Functions:"}]},{"type":"text","value":" Out of the box the grid provides "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sum"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"min"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"max"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"count"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"avg"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"first"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"last"}]},{"type":"text","value":". To use\none of these, set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.aggFunc"}]},{"type":"text","value":" to the string of the function you require."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The built-in functions will support "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"bigint"}]},{"type":"text","value":" values if you have them in your data, but the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"avg"}]},{"type":"text","value":"\nfunction will lose precision as it can only use integer arithmetic if "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"bigint"}]},{"type":"text","value":" is used."}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"User Registered Functions:"}]},{"type":"text","value":" You can install your own aggregation functions into the\ngrid and reference them as if they were grid provided functions by calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.addAggFunc(key, func)"}]},{"type":"text","value":" or by declaring\nthem using the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFuncs"}]},{"type":"text","value":" property."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Direct Functions:"}]},{"type":"text","value":" Lastly you can provide a function directly by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.aggFunc"}]},{"type":"text","value":" to your custom function. Direct functions do not appear in the toolPanel when selecting functions for your columns."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Aggregation functions are provided with an array of values that it should aggregate into one value that it then returns.\nThe following code snippets show the three ways of defining aggregations for columns as explained above."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Option 1 - use the built-in 'sum' function:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'sales', aggFunc: 'sum' },\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Option 2 - register aggFunc with the grid called 'mySum', then reference by name:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'sales', aggFunc: 'mySum' },\n    ],\n    aggFuncs: {\n        // this overrides the grids built-in sum function\n        'mySum': params => {\n            let sum = 0;\n            params.values.forEach(value => sum += value);\n            return sum;\n        }\n    },\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that custom aggregation functions can also be registered using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridApi.addAggFunc('mySum', mySumFunc)"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Option 3 - column uses a function directly:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'sales',\n            aggFunc: params => {\n                let sum = 0;\n                params.values.forEach(value => sum += value);\n                return sum;\n            }\n        },\n    ]\n}\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using a function directly will not work with column state, like\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/column-state/#save-and-apply"},"children":[{"type":"text","value":"Saving and Applying Column State"}]},{"type":"text","value":".\nIf you require state management with custom aggregation, use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"addAggFunc"}]},{"type":"text","value":" to register it."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"restricting-functions","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#restricting-functions","ariaLabel":"restricting functions permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Restricting Functions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, all functions are available to all value columns. To restrict the functions on a column, use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"allowedAggFuncs"}]},{"type":"text","value":" column property."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'gold',\n            // allow gui to set aggregations for this column\n            enableValue: true,\n            // restrict aggregations to sum, min and max\n            allowedAggFuncs: ['sum', 'min', 'max'],\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"example-1---built-in-functions","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-1---built-in-functions","ariaLabel":"example 1   built in functions permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example 1 - Built In Functions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows simple aggregation using the built in functions. The following should be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In order for aggregations to be used, a group column is specified. The example groups by country by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":" for the country column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column gold, silver, bronze and total all have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableValue=true"}]},{"type":"text","value":". This tells the grid to allow the user to select aggregation functions for these columns. Aggregation functions can be selected from the menu and also in the tool panel."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The gold, silver, bronze and total columns all have a different aggregation functions active."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The gold column has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"allowedAggFuncs=['sum','min','max']"}]},{"type":"text","value":" which restricts the user to selecting only sum, min or max as the aggregation function for this column."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Built-In Functions","name":"built-in-functions","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Remember to mark value columns with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableValue=true"}]},{"type":"text","value":" when using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/tool-panel/"},"children":[{"type":"text","value":"Tool Panel"}]},{"type":"text","value":".\nOtherwise you won't be able to drag and drop them to the 'Values' section in the Tool Panel."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-aggregation-functions","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-aggregation-functions","ariaLabel":"custom aggregation functions permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Custom Aggregation Functions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to add your own custom aggregation to the grid. Custom aggregation functions can be applied directly to\nthe column or registered to the grid and reference by name (similar to grid provided functions)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A custom aggregation function takes values to aggregate and aggregates them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Option 1 - reference the function directly with a column"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'sales',\n            aggFunc: params => {\n                let sum = 0;\n                params.values.forEach(value => sum += value);\n                return sum;\n            }\n        },\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Option 2 - register the function with the grid property aggFuncs"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'sales', aggFunc: 'mySum' },\n    ],\n    aggFuncs: {\n        // this overrides the grids built-in sum function\n        'mySum': params => {\n            let sum = 0;\n            params.values.forEach(value => sum += value);\n            return sum;\n        }\n    },\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The interface for the aggregation function is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"IAggFunc"}]},{"type":"text","value":" which receives the params "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"IAggFuncParams"}]},{"type":"text","value":" as follows:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfaces":"[\"IAggFunc\"]"},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Javascript doesn't always represent decimal numbers correctly (e.g "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0.2 + 0.1 = 0.30000000000000004"}]},{"type":"text","value":"). For this\nreason, if your aggregations rely on decimal values, it's better to add logic to enforce the amount of decimal\nnumbers that will be displayed in the cell (see the Rounded Average on Age Column in the example below)."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The next example shows many custom aggregation functions configured in a variety of ways and demonstrating different things aggregation functions can do."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following can be noted from the example:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Min/Max on Age Column"}]},{"type":"text","value":": The function creates an aggregation over age giving a min and a max age. The function knows whether it is working with leaf nodes (original row data items) or aggregated nodes (ie groups) by checking the type of the value. If the value is a number, it's a row data item, otherwise it's a group. This is because the result of the aggregation has two values based on one input value. "},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" The min/max function is then set by placing the function directly as the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.aggFunc"}]},{"type":"text","value":".\n"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Average on Age Column"}]},{"type":"text","value":": The age columns is aggregated a second time with a custom average function. The average function also needs to know if it is working with leaf nodes or group nodes, as if it's group nodes then the average is weighted. The grid also provides an average function that works in the same way, so there is no value in providing your own average function like this, it is done in this example for demonstration purposes. "},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" The average function is also set by placing the function directly as the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.aggFunc"}]},{"type":"text","value":".\n"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Rounded Average on Age Column"}]},{"type":"text","value":": This is the same as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Average on Age Column"}]},{"type":"text","value":" but forcing the values to display a maximum of\ntwo decimal numbers.\n"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Sum on Gold"}]},{"type":"text","value":": The gold column gets a custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sum"}]},{"type":"text","value":" aggregated function. The new sum function doesn't do anything different to the built in sum function, however it serves as a demonstration on how you can override. Maybe you want to provide a sum function that uses for example the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"math.js"}]},{"type":"text","value":" library."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" The sum function is set using a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions"}]},{"type":"text","value":" property.\n"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"'123' on Silver"}]},{"type":"text","value":": The '123' function ignores the inputs and always returns the value 123. Because it is registered as an aggregation function, it can be reference by name in the column definitions. Having a function return the same thing isn't very useful, however for the example it demonstrates easily where in the grid the function was used. "},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" The '123' function, like 'sum', is set using a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions"}]},{"type":"text","value":" property.\n"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"'xyz' on Bronze"}]},{"type":"text","value":": The 'xyz' function is another function with much use, however it demonstrates you can return anythin from an aggregation function - as long as your aggregation function can handle the result (if you have groups inside groups) and as long as your cell renderer can render the result (if using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellRenderer"}]},{"type":"text","value":"). "},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" The 'xyz' function is set using the API. Note that we also set 'xyz' in the grid options as otherwise\nthe grid would complain 'Function not found' as it tries to use the function before it is set via the API."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Aggregation Functions","name":"custom-agg-functions","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that custom aggregations will get called for the top level rows to calculate a 'Grand Total', not just for row groups. For example if you have 10 rows in the grid, the grid will still call the aggregation with 10 values to get a grand total aggregation."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grand total aggregation is normally not seen, unless the grid is configured with "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/grouping/#grouping-footers"},"children":[{"type":"text","value":"Grouping Total Footers"}]},{"type":"text","value":". Total footers display the result of the aggregation for top level, for example displaying a grand total even if no row grouping is active."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the grid is empty, the aggregations are still called once with an empty set. This is to calculate the grand total aggregation for the top level."}]},{"type":"element","tagName":"h2","properties":{"id":"example-3---multi-column-aggregation","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-3---multi-column-aggregation","ariaLabel":"example 3   multi column aggregation permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example 3 - Multi-Column Aggregation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The next example shows a ratio calculation to demonstrate how to create an "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFunc"}]},{"type":"text","value":" that uses values from multiple columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When values from multiple columns are required, a value object containing all the required values across multiple columns should be passed around instead of a simple value. This value object should also contain a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"toString()"}]},{"type":"text","value":" method so it can also be resolved by the grid to a single value. This is shown in the code snippet below:"}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    columnDefs: [\n|        { field: 'gold', aggFunc: 'sum' },\n|        { field: 'silver', aggFunc: 'sum' },\n|        {\n|            headerName: 'Ratio',\n|            colId: 'ratio',\n|            valueGetter: params => {\n|                if (!params.node.group) {\n|                    // no need to handle group levels - calculated in the 'ratioAggFunc'\n|                    return {\n|                        gold: params.data.gold,\n|                        silver: params.data.silver,\n|                        toString: () => (gold && silver) ? gold / silver : 0,\n|                    }\n|                }\n|            },\n|            aggFunc: (params) => {\n|                var goldSum = 0;\n|                var silverSum = 0;\n|                params.values.forEach(value => {\n|                    if (value && value.gold) {\n|                        goldSum += value.gold;\n|                    }\n|                    if (value && value.silver) {\n|                        silverSum += value.silver;\n|                    }\n|                });\n|                return {\n|                    gold: goldSum,\n|                    silver: silverSum,\n|                    toString: () => {\n|                        return goldSum && silverSum ? goldSum / silverSum : 0;\n|                    },\n|                }\n|            }\n|        }\n|    ]\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates this approach in action:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Multi-Column Aggregation","name":"multi-column-aggregation","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"filtering","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filtering","ariaLabel":"filtering permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Filtering"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Aggregations work on filtered values only. If a filter removes rows from a group, the aggregation for the group is recalculated to consider only rows remaining after the filter is applied."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To override this and always have aggregated values include filtered values (so the aggregated values don't change as filters are applied) set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressAggFilteredOnly"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the first example below, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressAggFilteredOnly"}]},{"type":"text","value":" is "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" set. Note that the Year column has a filter. As the filter changes, the aggregation values change."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Aggregation and Filters","name":"filters","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this next example, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressAggFilteredOnly=true"}]},{"type":"text","value":". Note that the Year column has a filter. As the filter changes, the aggregation values "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"do not"}]},{"type":"text","value":" change."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Suppress Filtered Only","name":"suppress-filtered-only","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"aggregation-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#aggregation-api","ariaLabel":"aggregation api permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Aggregation API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After the grid is initialised an aggregation can be applied to a column using the following:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Add the columns to the list of value columns via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.addValueColumn(colKey)"}]},{"type":"text","value":" - the 'sum' "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFunc"}]},{"type":"text","value":" is used by default."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"(Optional) Modify the aggregation function on the column via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.setColumnAggFunc(colKey, aggFunc)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the grid initialises, any column definitions that have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFunc"}]},{"type":"text","value":" set will be automatically added as a value column."}]},{"type":"element","tagName":"h2","properties":{"id":"column-headers","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#column-headers","ariaLabel":"column headers permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Column Headers"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When aggregating, the column headers will include the aggregation function for the column. For example the header "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'Bank Balance'"}]},{"type":"text","value":" will become "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'sum(Bank Balance)'"}]},{"type":"text","value":" if you have the sum aggregation active on the column. To turn this off and display simply "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'Bank Balance'"}]},{"type":"text","value":" then set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressAggFuncInHeader"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"custom-full-row-aggregation","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-full-row-aggregation","ariaLabel":"custom full row aggregation permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Custom Full Row Aggregation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.aggFunc"}]},{"type":"text","value":" is the preferred way of doing aggregations. However you may find scenarios where you cannot define your aggregations with respect to individual column values. Maybe you are aggregating sales records in different currencies and you need to read the value from one column and the currency code from another column and then convert the record to a common currency for aggregation - the point being you need data from more than just one column, or you want to put the results into different columns to the inputs for the calculation. For that reason, you can take control of the row aggregation by providing a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowAggNodes"}]},{"type":"text","value":" function as a grid callback."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.aggFunc"}]},{"type":"text","value":" is the preferred way of doing aggregations, only use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowAggNodes"}]},{"type":"text","value":"\nif you cannot achieve what you want as it will make your code more complex. Also note that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowAggNodes"}]},{"type":"text","value":"\nwill not work when pivoting."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For groups, when aggregating, the grid stores the results in the colId of the column. For example, if you have a group defined as follows:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'abby',\n            valueGetter: 'data.a + data.b',\n            colId: 'aaa'\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then the result of the aggregation will be stored in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"data.aaa"}]},{"type":"text","value":" and not in 'abby'. Most of the time this will not matter for you as the colId, if not provided, will default to the field. In order for the grid to display the aggregation result, it must be stored in the correct field name."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows an  example using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowAggNodes"}]},{"type":"text","value":". The example doesn't represent a real world scenario, it's contrived for demonstration. It takes the number of medals as inputs and creates two outputs, one as a normal sum and another by multiplying the result by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Math.PI"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Full Row Aggregation","name":"custom-full-row-aggregation","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 620, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"empty-aggregation-calls","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#empty-aggregation-calls","ariaLabel":"empty aggregation calls permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Empty Aggregation Calls"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When providing either "},{"type":"element","tagName":"a","properties":{"href":"#custom-aggregation-functions"},"children":[{"type":"text","value":"Custom Aggregation Functions"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"#custom-full-row-aggregation"},"children":[{"type":"text","value":"Custom Full Row Aggregation"}]},{"type":"text","value":" then you will see strange calls to these functions where empty lists are provided."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The empty aggregation calls happen in the following two scenarios:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid has no data (usually the case when the gird is initially displayed before the application has set data). Aggregating at the root level will request an aggregation of an empty set."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid has groups and a filter, such that groups are empty."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"recomputing-aggregates","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#recomputing-aggregates","ariaLabel":"recomputing aggregates permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Recomputing Aggregates"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the data changes after the aggregation is done, you can tell the grid to recompute the aggregates through the API method "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refreshClientSideRowModel('aggregate')"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Aggregation","version":null,"enterprise":true,"description":null,"rootPage":null},"headings":[{"id":"defining-aggregations","depth":2,"value":"Defining Aggregations"},{"id":"restricting-functions","depth":2,"value":"Restricting Functions"},{"id":"example-1---built-in-functions","depth":2,"value":"Example 1 - Built In Functions"},{"id":"custom-aggregation-functions","depth":2,"value":"Custom Aggregation Functions"},{"id":"example-3---multi-column-aggregation","depth":2,"value":"Example 3 - Multi-Column Aggregation"},{"id":"filtering","depth":2,"value":"Filtering"},{"id":"aggregation-api","depth":2,"value":"Aggregation API"},{"id":"column-headers","depth":2,"value":"Column Headers"},{"id":"custom-full-row-aggregation","depth":2,"value":"Custom Full Row Aggregation"},{"id":"empty-aggregation-calls","depth":2,"value":"Empty Aggregation Calls"},{"id":"recomputing-aggregates","depth":2,"value":"Recomputing Aggregates"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"vue","srcPath":"/aggregation","pageName":"aggregation"}},"staticQueryHashes":["1766026005","3577950178","3666212512"]}