{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/grouping-column-filter/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section shows how the Group Column Filter can be used when row groups are displayed under group columns."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"grouping-column-filter/resources/group-filter.png","alt":"Group Column Filter","width":"28rem","centered":"true"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Group Column Filter contains the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filtering/"},"children":[{"type":"text","value":"Column Filters"}]},{"type":"text","value":" (Provided Filters or "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/component-filter/"},"children":[{"type":"text","value":"Custom Filters"}]},{"type":"text","value":")\ndefined on the underlying columns directly in the group columns. When there are multiple underlying columns in the group\ncolumn, a dropdown is provided to switch between the different column filters."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Group Column Filter will not work with the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/grouping-group-rows/"},"children":[{"type":"text","value":"Group Rows"}]},{"type":"text","value":" display type as there are no group columns."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-group-column-filter","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Group Column Filter"},{"type":"element","tagName":"a","properties":{"href":"#enabling-group-column-filter","ariaLabel":"enabling group column filter 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 use the Group Column Filter, specify the following in your "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/grouping-single-group-column/#group-column-configuration"},"children":[{"type":"text","value":"Group Column Configuration"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    autoGroupColumnDef: {\n        // group columns configured to use the Group Column Filter\n        filter: 'agGroupColumnFilter',\n    }\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You must also have filters defined on the underlying columns which are being used in the grouping. If none of the columns\nin the grouping have filters defined, the Group Column Filter will not be displayed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that in order for the Group Column Filter to interact with the filters on the underlying columns in the grouping, they will all be created by the grid in advance of being opened for the first time."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As the Group Column Filter is using the underlying filters and their parameters, it does not have any parameters itself. This means that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef.filterParams"}]},{"type":"text","value":" property will be ignored."}]},{"type":"element","tagName":"h3","properties":{"id":"single-group-column","style":"position:relative;"},"children":[{"type":"text","value":"Single Group Column"},{"type":"element","tagName":"a","properties":{"href":"#single-group-column","ariaLabel":"single group column 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 the Group Column Filter with a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/grouping-single-group-column/"},"children":[{"type":"text","value":"Single Group Column"}]},{"type":"text","value":"."}]},{"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":"autoGroupColumnDef.filter = 'agGroupColumnFilter'"}]},{"type":"text","value":" is set to enable the Group Column Filter for the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group"}]},{"type":"text","value":" column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the Group Column Filter for the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group"}]},{"type":"text","value":" column:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A dropdown is displayed to allow you to change which underlying filter is displayed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" column is not shown in the dropdown as it does not have a filter defined."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The filter shows as active if any of the underlying filters are active."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Multiple underlying filters can be active at the same time."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The floating filter for the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group"}]},{"type":"text","value":" column is read-only. If you set a value against both the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" filters, the floating filter will display the filter value for the field selected in the Group Column Filter dropdown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The other columns demonstrate the different Provided Filters, and can be added to the group column by dragging them into the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/grouping-group-panel/"},"children":[{"type":"text","value":"Row Group Panel"}]},{"type":"text","value":" at the top."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you remove all the columns from the grouping except for the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" column, the option to show the filter in the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group"}]},{"type":"text","value":" column will be hidden as there is no valid filter to display."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Group Column Filter - Single Group Column","name":"group-filter-single","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 565, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"filterpanel\", \"setfilter\", \"multifilter\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"multiple-group-columns","style":"position:relative;"},"children":[{"type":"text","value":"Multiple Group Columns"},{"type":"element","tagName":"a","properties":{"href":"#multiple-group-columns","ariaLabel":"multiple 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 the Group Column Filter with "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/grouping-multiple-group-columns/"},"children":[{"type":"text","value":"Multiple Group Columns"}]},{"type":"text","value":"."}]},{"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":"autoGroupColumnDef.filter = 'agGroupColumnFilter'"}]},{"type":"text","value":" is set to enable the Group Column Filter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" columns are both group columns and are therefore using the Group Column Filter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Group Column Filters for "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" don't show the field dropdown as there is only one underlying column per group column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The floating filters for "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" are using the floating filters from the underlying columns."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Group Column Filter - Multiple Group Columns","name":"group-filter-multiple","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 565, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"group-column-floating-filter","style":"position:relative;"},"children":[{"type":"text","value":"Group Column Floating Filter"},{"type":"element","tagName":"a","properties":{"href":"#group-column-floating-filter","ariaLabel":"group column floating filter 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 floating filter for the Group Column Filter can display in one of two ways depending on how the group columns are configured.\nIt will either show a read-only value, or use the floating filter from the underlying column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using a single group column, the floating filter will always be read-only. It will display the value for the currently\nselected field in the Group Column Filter dropdown."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For multiple group columns, the floating filter will show the underlying filter if the underlying column is hidden, or\nthe read-only value if the underlying column is visible."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/component-filter/"},"children":[{"type":"text","value":"Custom Filters"}]},{"type":"text","value":", the filter will need to implement "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getModelAsString()"}]},{"type":"text","value":" for the\nread-only group floating filter to be able to display a value."}]},{"type":"element","tagName":"h2","properties":{"id":"filter-dropdown-behaviour","style":"position:relative;"},"children":[{"type":"text","value":"Filter Dropdown Behaviour"},{"type":"element","tagName":"a","properties":{"href":"#filter-dropdown-behaviour","ariaLabel":"filter dropdown behaviour 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 dropdown to select the underlying filter will behave slightly differently depending on the columns in the grouping:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns without filters defined will never be shown in the dropdown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If there is only one column in the group, the dropdown will not be shown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If there are multiple columns in the group, but only one has a filter defined, the dropdown will be displayed but disabled, and will show the column with the filter."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can see this behaviour by changing which columns are in the grouping using the "},{"type":"element","tagName":"a","properties":{"href":"#single-group-column"},"children":[{"type":"text","value":"Single Group Column Example"}]},{"type":"text","value":" above."}]},{"type":"element","tagName":"h2","properties":{"id":"filter-model-and-api","style":"position:relative;"},"children":[{"type":"text","value":"Filter Model and API"},{"type":"element","tagName":"a","properties":{"href":"#filter-model-and-api","ariaLabel":"filter model and api 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":"As the Group Column Filter uses the filters from the underlying columns, the filter model will be shown against the underlying\ncolumns and not the group columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you wish to access the filter instances via the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-api/#accessing-individual-filter-component-instances"},"children":[{"type":"text","value":"Filter API"}]},{"type":"text","value":",\nyou should use the underlying column fields, and not the group columns."}]},{"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 "},{"type":"element","tagName":"a","properties":{"href":"../grouping-custom-filtering/"},"children":[{"type":"text","value":"Custom Group Filtering"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Row Grouping - Group Column Filter","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-group-column-filter","depth":2,"value":"Enabling Group Column Filter"},{"id":"single-group-column","depth":3,"value":"Single Group Column"},{"id":"multiple-group-columns","depth":3,"value":"Multiple Group Columns"},{"id":"group-column-floating-filter","depth":2,"value":"Group Column Floating Filter"},{"id":"filter-dropdown-behaviour","depth":2,"value":"Filter Dropdown Behaviour"},{"id":"filter-model-and-api","depth":2,"value":"Filter Model and API"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"react","srcPath":"/grouping-column-filter","pageName":"grouping-column-filter"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}