{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/grouping-footers/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section shows how to add group footers to show group level totals."}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-group-footers","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enabling-group-footers","ariaLabel":"enabling group footers 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":"Enabling Group Footers"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to include a footer with each group, set the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupIncludeFooter"}]},{"type":"text","value":" to true. It is also possible to\ninclude a 'grand' total footer for all groups using the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupIncludeTotalFooter"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // adds subtotals\n    groupIncludeFooter: true,\n    // includes grand total\n    groupIncludeTotalFooter: true,\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that these properties can be used together to produce totals across all group levels."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates these properties. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Expanding groups reveals subtotal footers as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupIncludeFooter = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A grand total footer is shown as the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupIncludeTotalFooter = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The medal totals are "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/aggregation/"},"children":[{"type":"text","value":"aggregated"}]},{"type":"text","value":" via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFunc: 'sum'"}]},{"type":"text","value":" column property."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Enabling Group Footers","name":"enabling-group-footers","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 503, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"customising-footer-values","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#customising-footer-values","ariaLabel":"customising footer values 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":"Customising Footer Values"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, the footer will display the word 'Total' followed by the group key. However, this can be changed using the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"footerValueGetter"}]},{"type":"text","value":" supplied to the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/group-cell-renderer/"},"children":[{"type":"text","value":"Group Cell Renderer"}]},{"type":"text","value":" params as shown below: "}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    autoGroupColumnDef: { \n        cellRendererParams: {\n            footerValueGetter: params =>  {\n                const isRootLevel = params.node.level === -1;\n                if (isRootLevel) {\n                    return 'Grand Total';\n                }\n                return `Sub Total (${params.value})`;\n            },\n        }\n    },\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note in the snippet above that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"footerValueGetter"}]},{"type":"text","value":" contains special handling to display Subtotals and Grand Totals\ndifferently. This is demonstrated in the example below."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Customising Footer Values","name":"customising-footer-values","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 503, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"customising-footer-cells","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#customising-footer-cells","ariaLabel":"customising footer cells 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":"Customising Footer Cells"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In most cases "},{"type":"element","tagName":"a","properties":{"href":"../grouping-footers/#customising-footer-values"},"children":[{"type":"text","value":"Customising Footer Values"}]},{"type":"text","value":" is sufficient, however it is\nalso possible to customise the footer cell using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"innerCellRenderer"}]},{"type":"text","value":" supplied to the\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/group-cell-renderer/"},"children":[{"type":"text","value":"Group Cell Renderer"}]},{"type":"text","value":" params as shown below:"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"innerRenderer"}]},{"type":"text","value":" contains special handling to display Grand Total, Subtotal and\nnon-footer cells differently."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Customising Footer Cells","name":"customising-footer-cells","type":"mixed","options":"{ \"enterprise\": true, \"exampleHeight\": 503, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"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":"It is also possible to customise footer cells using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellRendererParams.innerRendererSelector"}]},{"type":"text","value":". For more details see the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/group-cell-renderer/"},"children":[{"type":"text","value":"Group Cell Renderer"}]},{"type":"text","value":" section."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"group-footer-limitations","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#group-footer-limitations","ariaLabel":"group footer limitations 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":"Group Footer Limitations"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Group footers are a UI concept only in the grid. It is the grids way of showing aggregated data (which belongs to the\ngroup) appearing after the group's children. Because the footer is a UI concept only, the following should be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"It is not possible to select footer nodes. Footer rows appear selected when the group is selected."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Footer rows are not part of the iterated set when the api method "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.forEachNode()"}]},{"type":"text","value":" is called."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Footer nodes are not exported to CSV or Excel."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If a Footer cell is copied to the clipboard, the word \"Total\" will not be included. Eg where the group for \"Sales\" would say \"Total Sales\", only \"Sales\" will go to the clipboard. This is because the word \"Total\" is not actually part of the data, it's something the grid rendering puts in."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up 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":"Next Up"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about "},{"type":"element","tagName":"a","properties":{"href":"../grouping-opening-groups/"},"children":[{"type":"text","value":"Opening Groups"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Row Grouping - Group Footers","version":null,"enterprise":true,"description":null},"headings":[{"id":"enabling-group-footers","depth":2,"value":"Enabling Group Footers"},{"id":"customising-footer-values","depth":2,"value":"Customising Footer Values"},{"id":"customising-footer-cells","depth":2,"value":"Customising Footer Cells"},{"id":"group-footer-limitations","depth":2,"value":"Group Footer Limitations"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"angular","srcPath":"/grouping-footers","pageName":"grouping-footers"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}