{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/column-groups/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Grouping columns allows you to have multiple levels of columns in your header and the ability, if you want, to 'open and close' column groups to show and hide additional columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Grouping columns is done by providing the columns in a tree hierarchy to the grid. There is no limit to the number of levels you can provide."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here is a code snippet of providing two groups of columns."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            headerName: 'Athlete Details',\n            children: [\n                { field: 'athlete' },\n                { field: 'age' },\n                { field: 'country' },\n            ]\n        },\n        {\n            headerName: 'Sports Results',\n            children: [\n                { field: 'sport' },\n                { field: 'total', columnGroupShow: 'closed' },\n                { field: 'gold', columnGroupShow: 'open' },\n                { field: 'silver', columnGroupShow: 'open' },\n                { field: 'bronze', columnGroupShow: 'open' },\n            ]\n        }\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows an example of column group configuration."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Basic Grouping","name":"basic-grouping","type":"generated","options":"{ \"exampleHeight\": 550 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"column-definitions-vs-column-group-definitions","style":"position:relative;"},"children":[{"type":"text","value":"Column Definitions vs Column Group Definitions"},{"type":"element","tagName":"a","properties":{"href":"#column-definitions-vs-column-group-definitions","ariaLabel":"column definitions vs column group definitions permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The list of Columns in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.columnDefs"}]},{"type":"text","value":" can be a mix of Columns and Column Groups.\nYou can mix and match at will, every level can have any number of Columns and Column Groups and in any order.\nThe difference in Column vs Column Group definitions is as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"children"}]},{"type":"text","value":" attribute is mandatory for Column Groups and not applicable for Columns."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If a definition has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"children"}]},{"type":"text","value":" attribute, it is treated as a Column Group. If it does not have a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"children"}]},{"type":"text","value":" attribute, it is treated as a Column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Most other attributes are not common across groups and columns (eg "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupId"}]},{"type":"text","value":" is only used for groups). If you provide attributes that are not applicable (eg you give a column a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupId"}]},{"type":"text","value":") they will be ignored."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"showing--hiding-columns","style":"position:relative;"},"children":[{"type":"text","value":"Showing / Hiding Columns"},{"type":"element","tagName":"a","properties":{"href":"#showing--hiding-columns","ariaLabel":"showing  hiding columns permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A group can have children shown or hidden based on the open / closed state of the group. This is controlled by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnGroupShow"}]},{"type":"text","value":" on one or more of the children. When a child has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnGroupShow"}]},{"type":"text","value":" set, it behaves in the following way:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"open"}]},{"type":"text","value":":"}]},{"type":"text","value":" The child is only shown when the group is open."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"closed"}]},{"type":"text","value":":"}]},{"type":"text","value":" The child is only shown when the group is closed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":":"}]},{"type":"text","value":" The child is always shown."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If a group has any child with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnGroupShow"}]},{"type":"text","value":" set as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"open"}]},{"type":"text","value":" / "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"closed"}]},{"type":"text","value":", then the open / close icon will appear in the group header. Otherwise the icon will not be shown."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Having columns only show when closed is useful when you want to replace a column with others. For example, in the code snippet above (and the example below), the 'Total' column is replaced with other columns when the group is opened."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If a group has an 'incompatible' set of children, then the group opening / closing will not be activated. An incompatible set is one which will have no columns visible at some point (i.e. all are set to 'open' or 'closed')."}]},{"type":"element","tagName":"h2","properties":{"id":"pinning-and-groups","style":"position:relative;"},"children":[{"type":"text","value":"Pinning and Groups"},{"type":"element","tagName":"a","properties":{"href":"#pinning-and-groups","ariaLabel":"pinning and groups permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pinned columns break groups. So if you have a group with 10 columns, 4 of which are inside the pinned area, two groups will be created, one with 4 (pinned) and one with 6 (not pinned)."}]},{"type":"element","tagName":"h2","properties":{"id":"moving-columns-and-groups","style":"position:relative;"},"children":[{"type":"text","value":"Moving Columns and Groups"},{"type":"element","tagName":"a","properties":{"href":"#moving-columns-and-groups","ariaLabel":"moving columns and groups permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you move columns so that columns in a group are no longer adjacent, then the group will again be broken and displayed as one or more groups in the grid."}]},{"type":"element","tagName":"h2","properties":{"id":"resizing-groups","style":"position:relative;"},"children":[{"type":"text","value":"Resizing Groups"},{"type":"element","tagName":"a","properties":{"href":"#resizing-groups","ariaLabel":"resizing groups permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you grab the group resize bar, it resizes each child in the group evenly distributing the new additional width. If you grab the child resize bar, only that one column will be resized."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"column-groups/resources/header-resize.jpg","maxwidth":"35rem","alt":"Header Resize","centered":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"colouring-groups","style":"position:relative;"},"children":[{"type":"text","value":"Colouring Groups"},{"type":"element","tagName":"a","properties":{"href":"#colouring-groups","ariaLabel":"colouring groups permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid doesn't colour the groups for you. However you can use the column definition "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerClass"}]},{"type":"text","value":" for this purpose. The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerClass"}]},{"type":"text","value":" attribute is available on both columns and column groups."}]},{"type":"element","tagName":"snippet","properties":{"suppressframeworkcontext":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // the CSS class name supplied to 'headerClass' will get applied to the header group\n        { headerName: 'Athlete Details', headerClass: 'my-css-class', children: []}\n    ]\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"align-the-header-group-label-to-the-right","style":"position:relative;"},"children":[{"type":"text","value":"Align the Header Group Label To The Right"},{"type":"element","tagName":"a","properties":{"href":"#align-the-header-group-label-to-the-right","ariaLabel":"align the header group label to the right permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The labels in the grouping headers are positioned with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"display: flex"}]},{"type":"text","value":". To make the group headers right-aligned, add the following rule set in your application, after the grid's stylesheets. Change the theme class to the one you use."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-theme-alpine .ag-header-group-cell-label"}]},{"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","property"]},"children":[{"type":"text","value":"flex-direction"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" row-reverse"},{"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":"h2","properties":{"id":"marry-children","style":"position:relative;"},"children":[{"type":"text","value":"Marry Children"},{"type":"element","tagName":"a","properties":{"href":"#marry-children","ariaLabel":"marry children permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sometimes you want columns of the group to always stick together. To achieve this, set the column group property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"marryChildren=true"}]},{"type":"text","value":". The example below demonstrates the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Both 'Athlete Details' and 'Sports Results' have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"marryChildren=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you move columns inside these groups, you will not be able to move the column out of the group. For example, if you drag 'Athlete', it is not possible to drag it out of the 'Athlete Details' group."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you move a non group column, e.g. Age, it will not be possible to place it in the middle of a group and hence impossible to break the group apart."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"It is possible to place a column between groups (e.g. you can place 'Age' between the 'Athlete Details' and 'Sports Results')."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Marry Children","name":"marry-children","type":"generated","options":"{ \"exampleHeight\": 560 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"sticky-label","style":"position:relative;"},"children":[{"type":"text","value":"Sticky Label"},{"type":"element","tagName":"a","properties":{"href":"#sticky-label","ariaLabel":"sticky label permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When Column Groups are too wide, it might be useful to have the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Header Label"}]},{"type":"text","value":" to be always visible while scrolling the grid horizontally. To achieve this, set the column group property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stickyLabel=true"}]},{"type":"text","value":". The example below demonstrates the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Both 'Athlete Details' and 'Sport Results' have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stickyLabel=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you scroll the grid horizontally, the header label will always be visible until it's completely out of view."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Sticky Label","name":"sticky-label","type":"generated","options":"{ \"exampleHeight\": 560 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"advanced-grouping-example","style":"position:relative;"},"children":[{"type":"text","value":"Advanced Grouping Example"},{"type":"element","tagName":"a","properties":{"href":"#advanced-grouping-example","ariaLabel":"advanced grouping example permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And here, to hammer in the 'no limit to the number of levels or groups', we have a more complex example. The grid here doesn't make much sense, it's just using the same Olympic Winners data and going crazy with the column groups. The example also demonstrates the following features:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Using the API to open and close groups. To do this, you will need to provide your groups with an ID during the definition, or look up the groups ID via the API (as an ID is generated if you don't provide one)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Demonstrates "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.openByDefault"}]},{"type":"text","value":" property, where it sets this on E and F groups, resulting in these groups appearing as open by default."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Uses "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColGroupDef"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColDef"}]},{"type":"text","value":" to apply a class to some of the headers. Using this technique, you can apply style to any of the header sections."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Advanced Grouping","name":"advanced-grouping","type":"generated","options":"{ \"extras\": [\"fontawesome\"], \"exampleHeight\": 680 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"group-changes","style":"position:relative;"},"children":[{"type":"text","value":"Group Changes"},{"type":"element","tagName":"a","properties":{"href":"#group-changes","ariaLabel":"group changes permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Similar to adding and removing columns, you can also add and remove column groups. If the column definitions passed in have column groups, then the columns will be grouped to the new configuration."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows adding and removing groups to columns. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"No Groups"}]},{"type":"text","value":" to show all columns without any grouping."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Participant in Group"}]},{"type":"text","value":" to show all participant columns only in a group."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Medals in Group"}]},{"type":"text","value":" to show all medal columns only in a group."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Participant and Medals in Group"}]},{"type":"text","value":" to show participant and medal columns in groups."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"As groups are added and removed, note that the state of the individual columns is preserved. To observe this, try moving, resizing, sorting, filtering etc and then add and remove groups, all the changed state will be preserved."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Group Changes","name":"group-changes","type":"generated"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example above shows adding and removing groups. It is also possible to add and remove columns from groups. This is demonstrated in the example below. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The example has two groups: "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete Details"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Sports Results"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The example has two sets of columns, "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Normal Cols"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Extra Cols"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When you move from "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Normal Cols"}]},{"type":"text","value":" to "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Extra Cols"}]},{"type":"text","value":", three new columns are added to the list. Two belong to the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete Details"}]},{"type":"text","value":" group, the other belongs to no group."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Group Changes 2","name":"group-changes-2","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"span-header-height","style":"position:relative;"},"children":[{"type":"text","value":"Span Header Height"},{"type":"element","tagName":"a","properties":{"href":"#span-header-height","ariaLabel":"span header height permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the Grid will balance the column headers with different number of levels with an empty column group header cell, as shown in the example below. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age"}]},{"type":"text","value":" column has an empty column group header cell above it (shown with red borders)."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Padded Header","name":"padded-header","type":"generated","options":"{ \"exampleHeight\": 300 }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Column Property"}]},{"type":"text","value":" "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"spanHeaderHeight"}]},{"type":"text","value":" will allow the header cell to span the whole height of the header container instead of using padding."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n  columnDefs: [\n    {\n      headerName: 'Athlete Details',\n      children: [\n        { field: 'athlete' },\n        { field: 'country' },\n      ],\n    },\n    {\n      field: 'age',\n      width: 90,\n      spanHeaderHeight: true\n    }\n  ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note the following: "}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age"}]},{"type":"text","value":" column header cell is not under a column group cell, but spans the entire height of the header container."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Span Header Height","name":"span-header-height","type":"generated","options":"{ \"exampleHeight\": 300 }"},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note","warning"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"spanHeaderHeight"}]},{"type":"text","value":"  does not work with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoHeaderHeight"}]},{"type":"text","value":"."}]}]}]}]},"frontmatter":{"title":"Column Groups","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"column-definitions-vs-column-group-definitions","depth":2,"value":"Column Definitions vs Column Group Definitions"},{"id":"showing--hiding-columns","depth":2,"value":"Showing / Hiding Columns"},{"id":"pinning-and-groups","depth":2,"value":"Pinning and Groups"},{"id":"moving-columns-and-groups","depth":2,"value":"Moving Columns and Groups"},{"id":"resizing-groups","depth":2,"value":"Resizing Groups"},{"id":"colouring-groups","depth":2,"value":"Colouring Groups"},{"id":"align-the-header-group-label-to-the-right","depth":2,"value":"Align the Header Group Label To The Right"},{"id":"marry-children","depth":2,"value":"Marry Children"},{"id":"sticky-label","depth":2,"value":"Sticky Label"},{"id":"advanced-grouping-example","depth":2,"value":"Advanced Grouping Example"},{"id":"group-changes","depth":2,"value":"Group Changes"},{"id":"span-header-height","depth":2,"value":"Span Header Height"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/column-groups","pageName":"column-groups"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}