{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/grouping-custom-filtering/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section shows how to customise row group filtering - such as providing different filters on the group columns than\nthe underlying columns."}]},{"type":"element","tagName":"h2","properties":{"id":"custom-group-column-filtering","style":"position:relative;"},"children":[{"type":"text","value":"Custom Group Column Filtering"},{"type":"element","tagName":"a","properties":{"href":"#custom-group-column-filtering","ariaLabel":"custom group column filtering 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 filter across all levels of the grouping in a single filter, you can use the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/filter-set-tree-list/"},"children":[{"type":"text","value":"Set Filter Tree List"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Otherwise, in order to know what values to use in the group column filter, a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" should be supplied to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":" as shown below:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"filtering","names":"[\"filterValueGetter\"]"},"children":[]}]},{"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":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {  \n    columnDefs: [\n        { field: 'sport', rowGroup: true, hide: true },\n        { field: 'country', rowGroup: true, hide: true },\n        { field: 'gold' },\n        { field: 'silver' },\n        { field: 'bronze' },\n    ], \n    autoGroupColumnDef: { \n        // enables filtering on the group column with specified filter type\n        filter: 'agTextColumnFilter',\n        // supplies 'sport' values to the filter \n        filterValueGetter: params => params.data.sport,                          \n    }, \n    groupDisplayType: 'singleColumn',\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the snippet above the rows are grouped by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sport"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":", however there is only a single group column. This is why a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" is required to supply the filter values. In this case, reading the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sport"}]},{"type":"text","value":" property from the row."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/grouping-single-group-column/#adding-values-to-leaf-nodes"},"children":[{"type":"text","value":"Adding Values to Leaf Nodes"}]},{"type":"text","value":" using a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"valueGetter"}]},{"type":"text","value":" or a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" will also allow filtering once the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filter"}]},{"type":"text","value":" column property is enabled. However, filtering will be performed using the leaf values in this case."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When applying a filter directly on the group column instead of using the Group Column Filter, the filter model is tied to the group column instead of the underlying columns. To set the filter via the Grid API on a single group column ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setFilterModel"}]},{"type":"text","value":"), it needs to be referenced using the name "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-Grid-AutoColumn"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| gridOptions.api.setFilterModel({\n|     'ag-Grid-AutoColumn': {\n|         filterType: 'text',\n|         type: 'contains',\n|         filter: 'Skiing'\n|     },\n| });\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates filtering with a single group column. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rows are grouped by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sport"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" under a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/grouping-single-group-column/"},"children":[{"type":"text","value":"Single Group Column"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" is supplied to the group column which returns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sport"}]},{"type":"text","value":" values to the filter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Filter Skiing Sports"}]},{"type":"text","value":" button at the top will set the filter using the Grid API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setFilterModel"}]},{"type":"text","value":". Note that the reference name "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-Grid-AutoColumn"}]},{"type":"text","value":" is used."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Group Filtering - Single Group Column","name":"custom-group-filtering-single","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 510, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"setfilter\"] }"},"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":"Filtering with "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/grouping-multiple-group-columns/"},"children":[{"type":"text","value":"Multiple Group Columns"}]},{"type":"text","value":" uses the same approach as described above with a "},{"type":"element","tagName":"a","properties":{"href":"#single-group-column"},"children":[{"type":"text","value":"Single Group Column"}]},{"type":"text","value":", however the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" must return different filter values for each group column, as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {  \n    columnDefs: [\n        { field: 'sport', rowGroup: true, hide: true },\n        { field: 'country', rowGroup: true, hide: true },\n        { field: 'gold' },\n        { field: 'silver' },\n        { field: 'bronze' },\n    ], \n    autoGroupColumnDef: { \n        // enables filtering on the group column with specified filter type\n        filter: 'agTextColumnFilter',\n        // supplies filter values to the column filters based on the colId\n        filterValueGetter: params => {      \n            const colId = params.column.getColId();        \n            if (colId.includes('sport')) {\n                return params.data.sport;      \n            } else if (colId.includes('country')) {\n                return params.data.country;      \n            }            \n        },                        \n    }, \n    groupDisplayType: 'multipleColumns',\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note in the snippet above that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" uses the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" value to determine which filter value to return, although different strategies may be required for different column configurations."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Similar to when using a single group column, the filter model is tied to the group columns instead of the underlying columns. To set the filter via the Grid API against each of the group columns, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-Grid-AutoColumn-[colId]"}]},{"type":"text","value":" is used, where "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[colId]"}]},{"type":"text","value":" is the column id."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| gridOptions.api.setFilterModel({\n|     'ag-Grid-AutoColumn-sport': {\n|         filterType: 'text',\n|         type: 'contains',\n|         filter: 'Skiing'\n|     },\n| });\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates filtering with multiple group columns. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rows are grouped by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sport"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" across "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/grouping-multiple-group-columns/"},"children":[{"type":"text","value":"Multiple Group Columns"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" is supplied to extract the correct filter value for each group column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Filter Skiing Sports"}]},{"type":"text","value":" button at the top will set the filter using the Grid API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setFilterModel"}]},{"type":"text","value":". Note that the reference name "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-Grid-AutoColumn-sport"}]},{"type":"text","value":" is used, as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sport"}]},{"type":"text","value":" is the column id for the column where the filter is changing."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Group Filtering - Multiple Group Columns","name":"custom-group-filtering-multiple","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 510, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"group-rows","style":"position:relative;"},"children":[{"type":"text","value":"Group Rows"},{"type":"element","tagName":"a","properties":{"href":"#group-rows","ariaLabel":"group rows 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 "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/grouping-group-rows/"},"children":[{"type":"text","value":"Group Rows"}]},{"type":"text","value":" display type does not have group columns, so filters can only be defined on the underlying columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the columns used in the grouping are hidden, they can still be filtered by using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/tool-panel-filters/"},"children":[{"type":"text","value":"Filters Tool Panel"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates filtering with row groups. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rows are grouped by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sport"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" under "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/grouping-group-rows/"},"children":[{"type":"text","value":"Group Rows"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Filters Tool Panel is shown, which allows filtering to be performed on "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sport"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" values."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Group Filtering - Group Rows","name":"custom-group-filtering-group-rows","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 510, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"setfilter\", \"filterpanel\"] }"},"children":[]}]},{"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-footers/"},"children":[{"type":"text","value":"Group Footers"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Row Grouping - Custom Group Filtering","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"custom-group-column-filtering","depth":2,"value":"Custom Group Column Filtering"},{"id":"single-group-column","depth":3,"value":"Single Group Column"},{"id":"multiple-group-columns","depth":3,"value":"Multiple Group Columns"},{"id":"group-rows","depth":3,"value":"Group Rows"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"react","srcPath":"/grouping-custom-filtering","pageName":"grouping-custom-filtering"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}