{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/grouping-group-rows/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers the Group Rows display type, where group rows are automatically added by the grid containing the\nrow groups instead of group columns. This can be preferred if you have a lot of information you want to say about the group."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"grouping-group-rows/resources/group-rows.png","alt":"Group Rows","maxwidth":"80%","constrained":"true","centered":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-group-rows","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enabling-group-rows","ariaLabel":"enabling 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":"Enabling Group Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To display each row group using group rows set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupDisplayType = 'groupRows'"}]},{"type":"text","value":" as shown below:"}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'country', rowGroup: true, hide: true },\n        { field: 'year', rowGroup: true, hide: true },\n        { field: 'sport' },\n        { field: 'total' }\n    ],\n    // display each row grouping in group rows\n    groupDisplayType: 'groupRows', \n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the snippet above, rows will be grouped by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" as both column definitions have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":" declared.\nThese row groups will be displayed using Group Rows as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupDisplayType = 'groupRows'"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates the Group Rows display type. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"There are two active row groups as the supplied "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" column definitions have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":" declared."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Instead of group columns, the row groups are displayed using full width group rows as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupDisplayType = 'groupRows'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" columns are not shown in the grid as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"hide=true"}]},{"type":"text","value":" is set on their column definitions."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Styling has been added to the group rows to highlight the different group levels."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Enabling Group Rows","name":"enabling-group-rows","type":"mixed","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"group-row-configuration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#group-row-configuration","ariaLabel":"group row configuration 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 Row Configuration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using Group Rows, it is possible to change the rendering of the group row. This done by either replacing the\nCell Renderer with your own "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/component-cell-renderer/"},"children":[{"type":"text","value":"Custom Cell Renderer"}]},{"type":"text","value":", or configuring the provided\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.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 Group Rows and no "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupRowRenderer"}]},{"type":"text","value":" properties are provided, then the default\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/group-cell-renderer/"},"children":[{"type":"text","value":"Group Cell Renderer"}]},{"type":"text","value":" is used with its 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    groupDisplayType: 'groupRows', \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    groupDisplayType: 'groupRows',\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":" 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 group row to your custom Cell Renderer. However, that also means\nthe customer Cell Renderer will also need to provide expand / collapse functionality."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","javascript-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n   // configures Group Rows with a customer Cell Renderer\n   groupDisplayType: 'groupRows', \n   groupRowRenderer: myCellRenderer,\n   groupRowRendererParams: {\n       someProp: 'someValue',\n   },\n}\n"}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","angular-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n   // configures Group Rows with a customer Cell Renderer\n   groupDisplayType: 'groupRows', \n   groupRowRenderer: myCellRenderer,\n   groupRowRendererParams: {\n       someProp: 'someValue',\n   },\n}\n"}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","react-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n   // configures Group Rows with a customer Cell Renderer\n   groupDisplayType: 'groupRows', \n   groupRowRenderer: myCellRenderer,\n   groupRowRendererParams: {\n       someProp: 'someValue',\n   },\n}\n"}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","vue-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n   // configures Group Rows with a customer Cell Renderer\n   groupDisplayType: 'groupRows', \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\nin the page "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.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 Group Rows and configure the Group Cell Renderer\n    groupDisplayType: 'groupRows', \n    groupRowRendererParams: {\n        // puts a checkbox onto each group row\n        checkbox: true,\n        // puts a row dragger onto each group row\n        rowDrag: true\n    },\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows an example of aggregation with Group Rows. It also provides an "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"innerRenderer"}]},{"type":"text","value":" to configure what gets\ndisplaying inside the row groups, however it keeps the Default Group Cell Renderer for its expand / collapse\nfunctionality. Note the following:"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","javascript-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"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 width 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":"li","properties":{},"children":[{"type":"text","value":"The example shows how to use CSS to enable the row hover effect, which is not shown on full width rows by default."}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","angular-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"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":"Aggregation data in the full width 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":"li","properties":{},"children":[{"type":"text","value":"The example shows how to use CSS to enable the row hover effect, which is not shown on full width rows by default."}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","react-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"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 width 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":"li","properties":{},"children":[{"type":"text","value":"The example shows how to use CSS to enable the row hover effect, which is not shown on full width rows by default."}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","vue-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"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":"The example shows how to use CSS to enable the row hover effect, which is not shown on full width rows by default."}]},{"type":"text","value":"\n"}]}]}]},{"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":"sorting-group-rows","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sorting-group-rows","ariaLabel":"sorting 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":"Sorting Group Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To sort a group row, you can apply a sort to the underlying column. In the example below the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/grouping-group-panel/"},"children":[{"type":"text","value":"Row Group Panel"}]},{"type":"text","value":" is enabled to demonstrate this. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking on "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" in the row group panel applies a sort to the country row groups."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Holding the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" key down while clicking "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" in the row group panel applies a sort to the year row groups, while maintaining the sort on the country row groups."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Sorting Group Rows","name":"sorting-group-rows","type":"mixed","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Next Up"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about the "},{"type":"element","tagName":"a","properties":{"href":"../grouping-custom-group-columns/"},"children":[{"type":"text","value":"Custom Group Columns"}]},{"type":"text","value":" display type."}]}]},"frontmatter":{"title":"Row Grouping - Group Rows","version":null,"enterprise":true,"description":null},"headings":[{"id":"enabling-group-rows","depth":2,"value":"Enabling Group Rows"},{"id":"group-row-configuration","depth":2,"value":"Group Row Configuration"},{"id":"providing-cell-renderer","depth":3,"value":"Providing Cell Renderer"},{"id":"configuring-group-cell-renderer","depth":3,"value":"Configuring Group Cell Renderer"},{"id":"sorting-group-rows","depth":2,"value":"Sorting Group Rows"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/grouping-group-rows","pageName":"grouping-group-rows"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}