{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/grouping-custom-group-columns/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers how to take charge of displaying the row groups without using the built-in display types. "}]},{"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":"When using the "},{"type":"element","tagName":"a","properties":{"href":"../grouping-single-group-column/"},"children":[{"type":"text","value":"Single Group Column"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"../grouping-multiple-group-columns/"},"children":[{"type":"text","value":"Multiple Group Columns"}]},{"type":"text","value":"\nand "},{"type":"element","tagName":"a","properties":{"href":"../grouping-group-rows/"},"children":[{"type":"text","value":"Group Rows"}]},{"type":"text","value":" display types, the grid automatically adds Auto Group Columns to display the groups."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, it is also possible to take control over which columns display which groups. This is useful if you want to have\na finer level of control over how your groups are displayed."}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-custom-group-columns","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Custom Group Columns"},{"type":"element","tagName":"a","properties":{"href":"#enabling-custom-group-columns","ariaLabel":"enabling custom group 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":"To display row groups using custom group columns set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupDisplayType = 'custom'"}]},{"type":"text","value":" as shown below:"}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // Single Group Column (Custom)\n        { \n            // group column name\n            headerName: 'Group',\n            // use the group cell render provided by the grid\n            cellRenderer: 'agGroupCellRenderer', \n            // informs the grid to display row groups under this column\n            showRowGroup: true \n        },\n        // columns to group by\n        { field: 'country', rowGroup: true, hide: true },\n        { field: 'year', rowGroup: true, hide: true },\n        { field: 'athlete' },\n        { field: 'gold' },\n        { field: 'silver' },\n        { field: 'bronze' }\n    ], \n    // prevents the grid from automatically adding group columns \n    groupDisplayType: 'custom',\n};\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note in the snippet above that in order to make a column display a group, you need to configure the property\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"coldef.showRowGroup"}]},{"type":"text","value":" for that column and can be configured in two different ways:"}]},{"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: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"coldef.showRowGroup=colId"}]},{"type":"text","value":", where "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" is the column that you want to show the group by and set"}]},{"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/29.3.5/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 a 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 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":"h2","properties":{"id":"custom-grouping-many-group-columns","style":"position:relative;"},"children":[{"type":"text","value":"Custom Grouping Many Group Columns"},{"type":"element","tagName":"a","properties":{"href":"#custom-grouping-many-group-columns","ariaLabel":"custom grouping many group 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":"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":"h2","properties":{"id":"custom-grouping-hidden-parents","style":"position:relative;"},"children":[{"type":"text","value":"Custom Grouping Hidden Parents"},{"type":"element","tagName":"a","properties":{"href":"#custom-grouping-hidden-parents","ariaLabel":"custom grouping hidden parents 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 following example 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":"h2","properties":{"id":"adding-values-to-leaf-nodes-for-groups","style":"position:relative;"},"children":[{"type":"text","value":"Adding Values To Leaf Nodes for Groups"},{"type":"element","tagName":"a","properties":{"href":"#adding-values-to-leaf-nodes-for-groups","ariaLabel":"adding values to leaf nodes for 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":"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":"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":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up 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":"Continue to the next section to learn about the "},{"type":"element","tagName":"a","properties":{"href":"../grouping-group-panel/"},"children":[{"type":"text","value":"Row Group Panel"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Row Grouping - Custom Group Columns","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-custom-group-columns","depth":2,"value":"Enabling Custom Group Columns"},{"id":"custom-grouping-many-group-columns","depth":2,"value":"Custom Grouping Many Group Columns"},{"id":"custom-grouping-hidden-parents","depth":2,"value":"Custom Grouping Hidden Parents"},{"id":"adding-values-to-leaf-nodes-for-groups","depth":2,"value":"Adding Values To Leaf Nodes for Groups"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"react","srcPath":"/grouping-custom-group-columns","pageName":"grouping-custom-group-columns"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}