{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/group-cell-renderer/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are grouping in the grid, then you will need to provide a group cell renderer as the group cell renderer is what provides the user with the expand and collapse functionality."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The key for the group cell renderer is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agGroupCellRenderer"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid's group cell renderer takes many parameters to configure it. Here is an example of a column and it's configuration:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // column definition configured to show group values with the cell renderer set to 'group'\n        {\n            showRowGroup: true,\n            cellRenderer:'agGroupCellRenderer',\n            // provide extra params to the cellRenderer\n            cellRendererParams: {\n                // turn off the row count\n                suppressCount: true,\n                // turn off double click for expand\n                suppressDoubleClickExpand: true,\n                // enable checkbox selection\n                checkbox: true,\n                // provide an inner renderer\n                innerRenderer: myInnerRenderer,\n                // provide an inner renderer\n                innerRendererParams: {foo: 'bar'},\n                // provide a footer value getter\n                footerValueGetter: myFooterValueGetter\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The set of parameters for the group cell renderer are defined on "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"GroupCellRendererParams"}]},{"type":"text","value":" and include:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"GroupCellRendererParams","overridesrc":"group-cell-renderer/group-cell-renderer.json","names":"[\"checkbox\",\"suppressCount\",\"suppressPadding\",\"suppressDoubleClickExpand\",\"suppressEnterExpand\",\"innerRenderer\", \"innerRendererParams\",\"innerRendererSelector\",\"footerValueGetter\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-group-cellrenderer","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-group-cellrenderer","ariaLabel":"example group cellrenderer 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":"Example Group cellRenderer"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows an example of configuring a group cell renderer. The example setup is not realistic as it has many columns configured for the showing the groups. The reason for this is to demonstrate different group column configurations side by side. In your application, you will typically have one column for showing the groups."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example is built up as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The data is grouped by two columns: "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Type"}]},{"type":"text","value":" (one of 'Fiction' or 'Non-Fiction') and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" (a country name, eg Ireland or United Kingdom)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"'Country Group - No Renderer'"}]},{"type":"text","value":" configures the grid to put the 'Country' group data only into this column by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"showRowGroup='country'"}]},{"type":"text","value":". All rows that are not this group are blank. There is no cell renderer configured, so the grid just places the text for the group into the cell, there is not expand / collapse functionality."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"'All Groups - no Renderer'"}]},{"type":"text","value":" builds on before, but adds all groups by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"showRowGroup=true"}]},{"type":"text","value":". This gets the column to display all groups, but again no cell renderer so not expand / collapse functionality."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group Renderer A"}]},{"type":"text","value":" builds on before, but adds the group cell renderer with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellRenderer='agGroupCellRenderer'"}]},{"type":"text","value":". The values are exactly as per the previous column, except now we have expand and collapse functionality."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group Renderer B"}]},{"type":"text","value":" builds on before, but adds "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field=city"}]},{"type":"text","value":" so that the city is displayed in the leave nodes in the group column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group Renderer C"}]},{"type":"text","value":" builds on before, but adds the following "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellRendererParams"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"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":"suppressCount=true"}]},{"type":"text","value":": Suppresses the row count."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressDoubleClickExpand=true"}]},{"type":"text","value":": Suppress double click for expanding."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"checkbox=true"}]},{"type":"text","value":": Adds a selection checkbox."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"innerRenderer=SimpleCellRenderer"}]},{"type":"text","value":": Puts custom rendering for displaying the value. The group cellRenderer will take care of all the expand / collapse, selection etc, but then allow you to customise the display of the value. In this example we add a border when the value is a group, and we set the colour based on whether the cell is a leaf node or not."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Group Renderers","name":"group-renderer","type":"mixed","options":"{\"enterprise\": true, \"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":"If you require functionality that is not provided by the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agGroupCellRenderer"}]},{"type":"text","value":", you can use a "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/component-cell-renderer/#custom-group-cell-renderer-example"},"children":[{"type":"text","value":"custom cell renderer"}]},{"type":"text","value":" to provide your own extended functionality."}]}]}]}]},"frontmatter":{"title":"Group Cell Renderer","version":null,"enterprise":null,"description":null},"headings":[{"id":"example-group-cellrenderer","depth":3,"value":"Example Group cellRenderer"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"javascript","srcPath":"/group-cell-renderer","pageName":"group-cell-renderer"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}