{"componentChunkName":"component---src-templates-doc-page-jsx","path":"/react-grid/grouping/","result":{"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-section","properties":{"id":"gzqjP_kF4NI","title":"Row Grouping Video Tutorial","header":"true"},"children":[{"type":"text","value":"\n    This page shows how to group your rows. It starts off with Auto Column Groups, the simplest way to configure row groups and then builds up into more advanced topics for row grouping.\n"}]},{"type":"element","tagName":"h2","properties":{"id":"specifying-group-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#specifying-group-columns","ariaLabel":"specifying group columns 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":"Specifying Group Columns"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=5s","time":"00:05"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To group rows by a particular column, mark the column you want to group with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":". There is no limit on the number of columns that the grid can group by. For example, the following will group the rows in the grid by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" and then "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sport"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: \"country\", rowGroup: true },\n        { field: \"sport\", rowGroup: true },\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":"To allow a column to be grouped when using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/tool-panel/"},"children":[{"type":"text","value":"Tool Panel"}]},{"type":"text","value":"\nset "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableRowGroup=true"}]},{"type":"text","value":" on the required columns. Otherwise you won't be able to drag\nand drop the columns to the grouping drop zone from the Tool Panel."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"auto-column-group","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#auto-column-group","ariaLabel":"auto column group 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":"Auto Column Group"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As you can see in the example below, as soon as there is at least one active row group, the grid will provide an additional column for displaying the groups in a tree structure with expand/collapse navigation."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"There is a group column at the left that lets you open/close the groups. It also shows the amount of rows grouped in brackets."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sorting works out of the box in the group column. You can test this by clicking on the group column header."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The country and year columns used for grouping are still shown as normal. You can hide them by adding "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"hide: true"}]},{"type":"text","value":" to their "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef"}]},{"type":"text","value":" as illustrated in the Multi Auto Column example."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Auto Column Group","name":"auto-column-group","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"multi-auto-column-group","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#multi-auto-column-group","ariaLabel":"multi auto column group 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":"Multi Auto Column Group"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=68s","time":"01:08"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid also lets you automatically create one column for each individual group. This is achieved by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.groupMultiAutoColumn = true"}]},{"type":"text","value":". The following example illustrates this. Note that:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"There is a group column displayed for each column that we are grouping by (in this case the country and year columns)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sorting works out of the box in each of these group column. You can test this by clicking on the group column header."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The country and year columns used for grouping are hidden so that we don't show redundant information. This is done by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.hide = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Multi Auto Column Group","name":"multi-auto-column-group","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"configuring-the-auto-group-column","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configuring-the-auto-group-column","ariaLabel":"configuring the auto group column 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":"Configuring the Auto Group Column"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=150s","time":"02:30"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can specify your own configuration used by the auto group columns by providing a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.autoGroupColumnDef"}]},{"type":"text","value":". This can be used to override any property as defined in the "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/column-definitions/"},"children":[{"type":"text","value":"Columns"}]},{"type":"text","value":"\ndocumentation page."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The auto columns generated by the grid use the AG Grid provided group cell renderer. This means that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.autoGroupColumnDef"}]},{"type":"text","value":" can also be used to pass additional properties to further customise how your groups are displayed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Check the "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/cell-rendering/"},"children":[{"type":"text","value":"cell rendering docs"}]},{"type":"text","value":" to see all the available parameters available to configure the group cell renderer."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example illustrates how you can configure the auto group columns. Note that:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"For the purpose of simplification this example uses one Auto Row Group Column. If you were to use Multi Auto Group Column the configuration would be applied to all the generated columns"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The header name of the group column is changed by setting in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef.headerName = 'CUSTOM!'"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The count for each group is removed by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef.cellRendererParams.suppressCount = true"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Each group has a select box by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef.cellRendererParams.checkbox = true"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The group column has a custom comparator that changes the way sorting works, this is achieved by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef.comparator = function (left, right){...}"}]},{"type":"text","value":". "},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"The custom comparator provided in the example changes the way the sorting works by ignoring the first letter of the group. To test this click on the header. When sorting desc you should see countries which second letter goes from Z..A, asc should show countries which second letter goes A..Z"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Configuring the Auto Group Column","name":"configuring-auto-group-column","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"filtering-on-group-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filtering-on-group-columns","ariaLabel":"filtering on group columns 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 on Group Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Filter on group columns is more complex than filtering on normal columns as the data inside the column can be a mix of data from different columns. For example if grouping by Country and Year, should the filter be for Year or for Country?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For auto generated group columns, the filter will work if you specify one of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"valueGetter"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"adding-values-to-leaf-nodes","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#adding-values-to-leaf-nodes","ariaLabel":"adding values to leaf nodes 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":"Adding Values To Leaf Nodes"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=230s","time":"03:50"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You may have noticed in the examples so far that the group columns don't produce values on the leaf nodes, the cells are empty. If you want to add values you can add a "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/value-getters/"},"children":[{"type":"text","value":"valueGetter"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" to the colDef and it will be used to render the leaf node."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A side effect of this is that filtering will now work for the columns using the field values."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example shows specifying "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" in the auto group column. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The group column shows both groups (Country and Year) as well as Athlete at the leaf level."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The field (Athlete) is used for filtering."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Adding Values To Leaf Nodes","name":"adding-values-to-leaf-nodes","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"group-cell-rendering","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#group-cell-rendering","ariaLabel":"group cell rendering 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 Cell Rendering"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you use the default group cell renderer provided by ag-grid, there are many parameters that can be passed to configure its behaviour, they are all explained in the "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/group-cell-renderer/"},"children":[{"type":"text","value":"Group Cell Renderer"}]},{"type":"text","value":" documentation. Please have a look at this docs if you are interested in finding our how to change the contents that are displayed in each grouped cell."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also configure the look & feel of the expand/contract buttons by "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/custom-icons/"},"children":[{"type":"text","value":"specifying your own custom icons"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"specifying-row-group-order","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#specifying-row-group-order","ariaLabel":"specifying row group order 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":"Specifying Row Group Order"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=295s","time":"04:55"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, if you are using a column to display more than one group, the grid will order the groups based in the order in which you provide the columns. The following code snipped will group by country first, then sport second."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // country listed first, gets grouped first\n        { headerName: \"Country\", field: \"country\", rowGroup: true },\n        // sport listed second, gets grouped second\n        { headerName: \"Sport\", field: \"sport\", rowGroup: true },\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To explicitly set the order of the grouping and not depend on the column order, use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":" instead of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup"}]},{"type":"text","value":" as follows:"}]},{"type":"element","tagName":"snippet","properties":{"suppressframeworkcontext":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // index = 1, gets grouped second\n        { headerName: \"Country\", field: \"country\", rowGroupIndex: 1 },\n        // index = 0, gets grouped first\n        { headerName: \"Sport\", field: \"sport\", rowGroupIndex: 0 },\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid will order sort the columns based on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":". The values can be any numbers that are sortable, they do NOT need to start at zero (or one) and the sequence can have gaps."}]},{"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":"rowGroup=true"}]},{"type":"text","value":" is simpler and what most people will prefer using.\nYou will notice that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":" is used by the column API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getColumnState()"}]},{"type":"text","value":"\nmethod as this cannot depend on the order of the column definitions."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following examples shows using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":" to set the order of the group columns. Year is grouped first and Country is grouped second."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Group Index","name":"row-group-index","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"showing-open-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#showing-open-groups","ariaLabel":"showing open groups 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":"Showing Open Groups"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Setting the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"showOpenedGroup=true"}]},{"type":"text","value":" will show the name of the opened group inside the group column.\nThis is useful when the user scrolls down through the children of the group and the row showing what group\nwas opened is scrolled out of view."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below uses "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"showOpenedGroup=true"}]},{"type":"text","value":" with one group column. The open group is shown at the leaf level."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Show Opened Groups","name":"show-opened-group","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example uses "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"showOpenedGroup=true"}]},{"type":"text","value":" with many group columns. The open groups are shown across all\ngroup columns where the group is open for that column."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Show Opened Groups Many Columns","name":"show-opened-groups-many-columns","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"hide-open-parents","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#hide-open-parents","ariaLabel":"hide open parents 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":"Hide Open Parents"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=348s","time":"05:48"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Depending on your preference, you may wish to hide parent rows when they are open. This gives the impression to the user that the children takes the place of the parent row. This feature only makes sense when groups are in different columns. To turn this feature on set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupHideOpenParents=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows examples of this. Notice that each group row has "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/aggregation/"},"children":[{"type":"text","value":"aggregated values"}]},{"type":"text","value":" which are explained in a documentation page of their own. When the group is closed, the group row shows the aggregated result. When the group is open, the group row is removed and in its place the child rows are displayed. To allow closing the group again, the group column knows to display the parent group in the group column only (so you can click on the icon to close the group)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates hiding open parents using auto group columns. To help demonstrate, the grid is configured to shade the rows different colors for the different group levels, so when you open a group, you can see the background change indicating that the group row is no longer display, instead the children are in it's place."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Filter is achieved for each column by providing a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":". The filterValueGetter returns the value of the grouped column - eg for Country, it will filter on Country."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Hide Open Parents","name":"hide-open-parents","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"keeping-columns-visible","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#keeping-columns-visible","ariaLabel":"keeping columns visible 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":"Keeping Columns Visible"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=417s","time":"06:57"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default dragging a column out of the grid will make it hidden and un-grouping a column will make it visible again. This default behaviour can be changed with the following properties:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressDragLeaveHidesColumns"}]},{"type":"text","value":": When dragging a column out of the grid, eg when dragging a column from the grid to the group drop zone, the column will remain visible."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressMakeColumnVisibleAfterUnGroup"}]},{"type":"text","value":": When un-grouping, eg when clicking the 'x' on a column in the drop zone, the column will not be made visible."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default behaviour is more natural for most scenarios as it stops data appearing twice. E.g. if country is displayed in group column, there is no need to display country again in the country column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates these two properties. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns country and year can be grouped by dragging the column to the group drop zone."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Grouped columns can be un-grouped by clicking the 'x' on the column in the drop zone."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column visibility is not changed while the columns are grouped and un-grouped."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"While dragging the column header over the drop zone, before it is dropped, the column appears translucent to indicate that the grouping has not yet been applied."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Keep Columns Visible","name":"keep-columns-visible","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"full-width-group-rows","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#full-width-group-rows","ariaLabel":"full width group rows 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":"Full Width Group Rows"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=500s","time":"08:20"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Instead of having a column for showing the groups, you can dedicate the full row for showing details about the group. This can be preferred if you have a lot of information you want to say about the group."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows the first example in this page, the Auto Column Group example, using full width rows. Note that all that is necessary to achieve this it to add "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupUseEntireRow:true"}]},{"type":"text","value":" to your gridOptions"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Full Width Group Rows","name":"full-width-group-rows","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"configuring-full-width-group-rows","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configuring-full-width-group-rows","ariaLabel":"configuring full width group rows 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":"Configuring Full Width Group Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using Full Width Group Rows, it is possible to change the rendering of the group row. This done by either replacing the Cell Renderer with your own "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/component-cell-renderer/"},"children":[{"type":"text","value":"Custom Cell Renderer"}]},{"type":"text","value":", or configuring the provided "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/group-cell-renderer/"},"children":[{"type":"text","value":"Group Cell Renderer"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If using Full Width Group Rows and no "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowRenderer"}]},{"type":"text","value":" properties are provided, then the default "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/group-cell-renderer/"},"children":[{"type":"text","value":"Group Cell Renderer"}]},{"type":"text","value":" is used with it's default values."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // groups by row - the grid defaults to using the default group cell renderer for the row with default settings.\n    groupUseEntireRow: true,\n}\n"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // identical to above - uses 'agGroupCellRenderer' which is the default, so doesn't change anything.\n    groupUseEntireRow: true,\n    groupRowRenderer: 'agGroupCellRenderer',\n}\n"}]},{"type":"element","tagName":"h3","properties":{"id":"providing-cell-renderer","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#providing-cell-renderer","ariaLabel":"providing cell renderer 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":"Providing Cell Renderer"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To provide your own Cell Renderer, use the grid properties "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowRenderer"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowRendererFramework"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowRendererParams"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using your own Cell Renderer hands over rendering of the full row to your custom Cell Renderer. However that also means the customer Cell Renderer will also need\nto provide expand / collapse functionality."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // configures Full Width rows with a customer Cell Renderer\n    groupUseEntireRow: true,\n    groupRowRenderer: 'myCellRenderer',\n    groupRowRendererParams: {\n        someProp: 'someValue',\n    },\n}\n"}]},{"type":"element","tagName":"h3","properties":{"id":"configuring-group-cell-renderer","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configuring-group-cell-renderer","ariaLabel":"configuring group cell renderer 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":"Configuring Group Cell Renderer"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Configure the default Group Cell Renderer using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowRendererParams"}]},{"type":"text","value":". Full details on what to configure are provided in the page\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/group-cell-renderer/"},"children":[{"type":"text","value":"Group Cell Renderer"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // use Full Width group rows and configure the Group Cell Renderer\n    groupUseEntireRow: true,\n    groupRowRendererParams: {\n        // puts a checkbox onto each group row\n        checkbox: true,\n    },\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows an example of aggregating with full width rows for groups. It also provides an "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"innerRenderer"}]},{"type":"text","value":" to configure what gets displaying inside the row groups, however it keeps the Default Group Cell Renderer for it's expand / collapse functionality. The following can be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Each group spans the width of the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Each group uses a custom Cell Renderer. The cell renderer shows the aggregation data for each medal type."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Each medal column is editable, you can change the number of medals for any of the athletes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column Year has a filter on it."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The cell renderer has logic listening for changes to filtering and data cell changes*. This means the aggregation data in the full with row is updated if:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you edit any cell"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you filter the data (ie take rows out)."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"* This is true for Vanilla Javascript and React. Angular uses data binding and thus the aggregation data updates automatically without needing to listen to events."}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Full Width Groups Rendering","name":"full-width-groups-rendering","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"], \"extras\": [\"fontawesome\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"default-group-order","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#default-group-order","ariaLabel":"default group order 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":"Default Group Order"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=614s","time":"10:14"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid does not attempt to order the groups. The groups are presented on a 'first come, first served' basis. For example if grouping by country, and the first row is for country 'Ireland', then the first displayed group will be 'Ireland'."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For most scenarios, this will not be a problem as the user can sort the grouping column. However this will be a problem in one of the following cases:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid is using "},{"type":"element","tagName":"a","properties":{"href":"#full-width-group-rows"},"children":[{"type":"text","value":"Full Width Group Rows"}]},{"type":"text","value":", which means there is no columns associated with the groups to order."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The groups have an implied order that should not require column sorting to achieve. For example grouping by month (January, February...) or other groups which have business meaning that require order e.g. [\"Severe\", \"Medium\", \"Low\"] or [\"Today\", \"Yesterday\", \"Older than 1 day\"]."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To provide a group order, you should supply "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultGroupSortComparator"}]},{"type":"text","value":" callback to the grid. The callback is a standard JavaScript Array comparator that takes two values and compares them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows providing a default group order. From the example the following can be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Groups are displayed using full width rows. There is no column to click to sort the groups."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid is provided with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultGroupSortComparator"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Groups are sorted alphabetically."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Default Group Order","name":"default-group-order","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"unbalanced-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#unbalanced-groups","ariaLabel":"unbalanced groups 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":"Unbalanced Groups"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=691s","time":"11:31"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If there are rows containing "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" values for the column that is being grouped then these rows will not be grouped. We refer to this scenario as "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Unbalanced Groups"}]},{"type":"text","value":" in that there is a mix of groups and rows as siblings. The following example demonstrates:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Data is grouped by column 'State'. Rows are either grouped by state 'New York', 'California' or not grouped."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Removing the grouping shows that the non grouped rows have no 'State' value."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Unbalanced Groups","name":"unbalanced-groups","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 570, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you do not want rows with null or undefined to be left out of groups, but wanta group created to contain these empty values, then change your data and replace the null and undefined values with something (eg the string 'Empty' or a string with a blank space character i.e. ' ')."}]},{"type":"element","tagName":"h2","properties":{"id":"expanding-rows-via-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#expanding-rows-via-api","ariaLabel":"expanding rows via 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":"Expanding Rows via API"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=750s","time":"12:30"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To expand or contract a group via the API, you first must get a reference to the rowNode and then call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setExpanded(boolean)"}]},{"type":"text","value":". This will result in the grid getting updated and displaying the correct rows. For example, to expand a group with the name 'Zimbabwe' would be done as follows:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\ngridOptions.api.forEachNode(node => {\n    if (node.key === 'Zimbabwe') {\n        node.setExpanded(true);\n    }\n});\n"}]},{"type":"element","tagName":"h2","properties":{"id":"grouping-complex-objects-with-keys","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grouping-complex-objects-with-keys","ariaLabel":"grouping complex objects with keys 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":"Grouping Complex Objects with Keys"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=817s","time":"13:37"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your rowData has complex objects that you want to group by, then the default grouping will convert each object to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"\"[object object]\""}]},{"type":"text","value":" which will be useless to you. Instead you need to get the grid to convert each object into a meaningful string to act as the key for the group. You could add a 'toString' method to the objects - but this may not be possible if you are working with JSON data. To get around this, use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.keyCreator"}]},{"type":"text","value":", which gets passed a value and should return the string key for that value."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows grouping on the county, with country an object within each row."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// row item has complex object for country"}]},{"type":"text","value":"\nrowItem "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    athlete"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Michael Phelps'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    country"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'United States'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        code"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'US'"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n      // the column definition for country uses a keyCreator\n      {\n          field: \"country\",\n          keyCreator: params => params.value.name\n      }\n    ]\n}\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Grouping Complex Objects with Keys","name":"grouping-complex-objects","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"grouping-footers","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grouping-footers","ariaLabel":"grouping 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":"Grouping Footers"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=929s","time":"15:29"},"children":[]}]},{"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. The footer is displayed as the last line of the group when the group is expanded - it is not displayed when the group is collapsed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The footer by default will display the word 'Total' followed by the group key. If this is not what you want, then use\nthe "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"footerValueGetter"}]},{"type":"text","value":" option. The following shows two ways for achieving the same, one using a function, one\nusing an expression."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // Option 1: use a function to return a footer value\n        {\n            cellRenderer: 'agGroupCellRenderer',\n            cellRendererParams: {\n                footerValueGetter: params =>  {\n                    return 'Total (' + params.value + ')';\n                },\n            }\n        },\n        // Option 2: use an expression to return a footer value - gives same result\n        {\n            cellRenderer: 'agGroupCellRenderer',\n            cellRendererParams: {\n                footerValueGetter: '\"Total (\" + x + \")\"'\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When showing the groups in one column, the aggregation data is displayed in the group header when collapsed and only in the footer when expanded (ie it moves from the header to the footer). To have different rendering, provide a custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupInnerCellRenderer"}]},{"type":"text","value":", where the renderer can check if it's a header or footer."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to include a 'grand' total footer for all groups using the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupIncludeTotalFooter"}]},{"type":"text","value":". This property can be used along side "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupIncludeFooter"}]},{"type":"text","value":" to produce totals at all group levels or used independently."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below uses "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/aggregation/"},"children":[{"type":"text","value":"aggregation"}]},{"type":"text","value":" which is explained in the next section but included here as footer rows only make sense when used with aggregation. In this example notice:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.groupIncludeFooter = true"}]},{"type":"text","value":" -  includes group totals within each group level."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.groupIncludeTotalFooter = true"}]},{"type":"text","value":" -  includes a 'grand' total across all groups."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Group Footers","name":"grouping-footers","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"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":"Group footers are a UI concept only in the grid. It is the grids way of showing aggregated data (which belongs\nto the group) appearing after the group's children. Because the footer is a UI concept only, the following\nshould be noted: "},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"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 parted 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":"removing-single-children","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#removing-single-children","ariaLabel":"removing single children 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":"Removing Single Children"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=1029s","time":"17:09"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your data has groups with only one child, then it can make sense to collapse these groups as there is no benefit to the user creating groups with just one child, it's arguably waste of space."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To turn this feature on set either "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRemoveSingleChildren=true"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRemoveLowestSingleChildren=true"}]},{"type":"text","value":"."}]},{"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":"groupRemoveSingleChildren:"}]},{"type":"text","value":" Removes groups from display if they only have one child."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"groupRemoveLowestSingleChildren:"}]},{"type":"text","value":" Removes groups from display if they only have one child and the groups is at the lowest level (ie contains leaf nodes)."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows this feature. Note the following:"}]},{"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":"Normal:"}]},{"type":"text","value":" Shows the rows as normal, nothing is removed. All groups have their children count in brackets after the group."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Remove Single Children:"}]},{"type":"text","value":" Removes single children using the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRemoveSingleChildren=true"}]},{"type":"text","value":". All groups with just one child are remove."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Remove Lowest Single Children:"}]},{"type":"text","value":" Removes single children using the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRemoveLowestSingleChildren=true"}]},{"type":"text","value":". All groups for the 'City' column with just one child are remove. The 'City' column is the lowest level group, so it's the only group candidate to be removed when one child."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Removing Single Children","name":"remove-single-children","type":"vanilla","options":"{ \"enterprise\": true, \"exampleHeight\": 540, \"modules\":[\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"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":"Filtering does not impact what groups get removed. For example if you have a group with two\nchildren, the group is not removed, even if you apply a filter that removes one of the children.\nThis is because AG Grid does grouping first and then applies filters second. If you change the filter,\nonly the filter is reapplied, the grouping is not reapplied."}]}]}]},{"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 properties "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRemoveSingleChildren"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRemoveLowestSingleChildren"}]},{"type":"text","value":"\nand "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupHideOpenParents"}]},{"type":"text","value":" are mutually exclusive, you can only pick one.\nTechnically it doesn't make sense to mix these. They don't work together as the logic for removing single\nchildren clashes with the logic for hiding open parents. Both want to remove parents at different times\nand for different reasons."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"creating-your-own-group-display-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#creating-your-own-group-display-columns","ariaLabel":"creating your own group display columns 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":"Creating Your Own Group Display Columns"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-link","properties":{"src":"https://www.youtube.com/watch?v=gzqjP_kF4NI&t=1136s","time":"18:56"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In all the previous examples the grid is in charge of generating the column's that display the groups, these columns are called auto group columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can prevent the generation of the auto group columns and take control over which columns display which groups. This is useful if you want to have a finer control over how your groups are displayed."}]},{"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":"We advise against using your own group columns. Only do this if the Auto Group Columns do not meet your requirements. Otherwise defining your own group columns will add unnecessary complexity to your code."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To disable the auto group columns set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.groupSuppressAutoColumn = true"}]},{"type":"text","value":". When you do this, you will be in charge of configuring which columns show which groups."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to make a column display a group, you need to configure the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"coldef.showRowGroup"}]},{"type":"text","value":" for that column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"coldef.showRowGroup"}]},{"type":"text","value":" can be configured in two different fashions."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"To tell this column to show all the groups: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"coldef.showRowGroup= true"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"To tell this column to show the grouping for a particular column. If you want to do this you need to know the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" of the column that you want to show the group by and set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"coldef.showRowGroup= colId"}]}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you do specify "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"coldef.showRowGroup"}]},{"type":"text","value":" you are going to also tell this column how to display the contents of this group, the easiest way to do this is by using the out of the box "},{"type":"element","tagName":"a","properties":{"href":"/archive/25.1.0/cell-rendering/"},"children":[{"type":"text","value":"group cell renderer"}]},{"type":"text","value":" "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellRenderer:'agGroupCellRenderer'"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This illustrates how to configure an specific column to show the groups generated by the country column"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    columnDefs: [\n|        // The column we are grouping by, it is also hidden.\n|        { field: \"country\", rowGroup: true, hide: true },\n|\n|        // We choose this column as the column to show the country groups.\n|        { headerName: \"Country - group\", showRowGroup: 'country', cellRenderer: 'agGroupCellRenderer' },\n|    ]\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that the group column needs an appropriate cell renderer, in this case the out-of-the-box group cell renderer is used."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows how to appoint individual columns to show individual groups"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Grouping Many Group Columns","name":"custom-grouping-many-group-columns","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows how to display all the groups in a single column"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Grouping Single Group Column","name":"custom-grouping-single-group-column","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 505, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The last example of explicitly setting groups shows an alternative for Hide Open Parents. The example below demonstrates hiding open parents using explicit group columns."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Grouping Hidden Parents","name":"custom-grouping-hidden-parents","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 550, \"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":"Remember these examples are achieving the same that you can achieve with\nthe auto groups columns, but their configuration is not as straight forward. We are keeping this for edge cases\nand for backwards compatibility for when we only supported this style of configuration."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Adding leaf nodes data can also be achieved even if you provide your own group columns, this is illustrated in the following example. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The first column shows the Country group only. The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" is configured to return the country so that country is used for filtering."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The second columns shows Year (for group levels) and Athlete (for leaf levels). Because the field is set, the filter will use the field value for filtering."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"This is an example of a case where not using auto group columns lets us add custom different behaviour to each of the grouping columns."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Adding Values To Leaf Nodes for Groups","name":"adding-values-to-leaf-nodes-for-groups","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"setfilter\"]}"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"grid-grouping-properties","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grid-grouping-properties","ariaLabel":"grid grouping properties 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":"Grid Grouping Properties"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Grouping has the following grid properties (set these as grid properties, i.e. on "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions"}]},{"type":"text","value":", not on the columns):"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-properties/properties.json","section":"rowGrouping"},"children":[]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grouping/resources/apiReference.json"},"children":[]}]}]},"frontmatter":{"title":"Row Grouping","enterprise":true,"description":null},"headings":[{"id":"specifying-group-columns","depth":2,"value":"Specifying Group Columns"},{"id":"auto-column-group","depth":2,"value":"Auto Column Group"},{"id":"multi-auto-column-group","depth":2,"value":"Multi Auto Column Group"},{"id":"configuring-the-auto-group-column","depth":2,"value":"Configuring the Auto Group Column"},{"id":"filtering-on-group-columns","depth":2,"value":"Filtering on Group Columns"},{"id":"adding-values-to-leaf-nodes","depth":2,"value":"Adding Values To Leaf Nodes"},{"id":"group-cell-rendering","depth":2,"value":"Group Cell Rendering"},{"id":"specifying-row-group-order","depth":2,"value":"Specifying Row Group Order"},{"id":"showing-open-groups","depth":2,"value":"Showing Open Groups"},{"id":"hide-open-parents","depth":2,"value":"Hide Open Parents"},{"id":"keeping-columns-visible","depth":2,"value":"Keeping Columns Visible"},{"id":"full-width-group-rows","depth":2,"value":"Full Width Group Rows"},{"id":"configuring-full-width-group-rows","depth":2,"value":"Configuring Full Width Group Rows"},{"id":"providing-cell-renderer","depth":3,"value":"Providing Cell Renderer"},{"id":"configuring-group-cell-renderer","depth":3,"value":"Configuring Group Cell Renderer"},{"id":"default-group-order","depth":2,"value":"Default Group Order"},{"id":"unbalanced-groups","depth":2,"value":"Unbalanced Groups"},{"id":"expanding-rows-via-api","depth":2,"value":"Expanding Rows via API"},{"id":"grouping-complex-objects-with-keys","depth":2,"value":"Grouping Complex Objects with Keys"},{"id":"grouping-footers","depth":2,"value":"Grouping Footers"},{"id":"removing-single-children","depth":2,"value":"Removing Single Children"},{"id":"creating-your-own-group-display-columns","depth":2,"value":"Creating Your Own Group Display Columns"},{"id":"grid-grouping-properties","depth":2,"value":"Grid Grouping Properties"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/grouping","pageName":"grouping"}},"staticQueryHashes":["1766026005","3577950178","3666212512"]}