{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/grouping-sorting/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section provides details on how to configure and customise how row groups are sorted."}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-group-sorting","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Group Sorting"},{"type":"element","tagName":"a","properties":{"href":"#enabling-group-sorting","ariaLabel":"enabling group sorting 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":"When using "},{"type":"element","tagName":"a","properties":{"href":"../grouping-single-group-column/"},"children":[{"type":"text","value":"Single Group Column"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"../grouping-multiple-group-columns/"},"children":[{"type":"text","value":"Multiple Group Columns"}]},{"type":"text","value":", sorting can be enabled through the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortable"}]},{"type":"text","value":" column property as shown below:  "}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = { \n    defaultColDef: {\n        // enable sorting across all columns - including Row Group Columns\n        sortable: true,\n    }, \n    autoGroupColumnDef: {\n        // enabled sorting on Row Group Columns only \n        sortable: true,        \n    },\n    // also applies to the 'multipleColumns' display type \n    groupDisplayType: 'singleColumn',\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is common to simply define "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColDef.sortable = true"}]},{"type":"text","value":" across all columns, which includes row group columns.\nHowever, in cases where it is preferable to define sorting on the Row Group Columns directly,\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef.sortable = true"}]},{"type":"text","value":" can be used."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sorting is also enabled using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortable"}]},{"type":"text","value":" column property with "},{"type":"element","tagName":"a","properties":{"href":"../grouping-custom-group-columns/"},"children":[{"type":"text","value":"Custom Group Columns"}]},{"type":"text","value":", as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {   \n            cellRenderer: 'agGroupCellRenderer',\n            showRowGroup: true,\n            // enabled sorting on this Row Group Column only \n            sortable: true,  \n        },\n    ],\n    defaultColDef: {\n        // enable sorting across all columns - including Row Group Columns\n        sortable: true,\n    }, \n    groupDisplayType: 'custom',\n};\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates how sorting is enabled with "},{"type":"element","tagName":"a","properties":{"href":"../grouping-multiple-group-columns/"},"children":[{"type":"text","value":"Multiple Group Columns"}]},{"type":"text","value":".\nNote that sorting is enabled across all columns, including Row Group Columns, using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColDef.sortable = true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Enabling Group Sorting","name":"enabling-group-sorting","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 540, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"mixed-group-sorting","style":"position:relative;"},"children":[{"type":"text","value":"Mixed Group Sorting"},{"type":"element","tagName":"a","properties":{"href":"#mixed-group-sorting","ariaLabel":"mixed group sorting 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":"By default, columns only apply sorting to their leaf level row data, as such to sort row groups you should apply the sort to the column on which the grouping has been applied."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This creates the side effect that groups can be sorted in multiple directions simultaneously, the group column reflects this by displaying the multi-sort icon when it does not match one or more of the provided columns sort direction."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'year',\n            rowGroup: true,\n            sortable: true,\n            sort: 'desc',\n        },\n        {\n            field: 'handset',\n            rowGroup: true,\n            sortable: true,\n            sort: 'asc',\n        },\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this snippet, sorting on the year or handset column will sort their respective row groups. As the year and handset column have different sorts applied to them, the group column displays the mixed sort icon."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates mixed group sorting. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click the header of the group column to apply a sort, observe how it forces the year and handset columns sort to match."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Hold shift and click the header of the year column, observe how the sort direction is now different from the auto column, and the auto column now displays the mixed-sort icon."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Mixed Group Sort","name":"mixed-group-sort","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-group-sorting","style":"position:relative;"},"children":[{"type":"text","value":"Custom Group Sorting"},{"type":"element","tagName":"a","properties":{"href":"#custom-group-sorting","ariaLabel":"custom group sorting 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":"By default, any sort "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"comparator"}]},{"type":"text","value":" defined on a column that is used to group rows by will also be used by the Group Column.\nFor example, consider the following column definition:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"sort","names":"[\"comparator\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| const gridOptions = {\n|     columnDefs: [\n|         {\n|             field: 'month',\n|             rowGroup: true,\n|             comparator: (a, b) => {\n|                 const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', \n|                                 'August', 'September','October', 'November', 'December'];\n| \n|                 // sorts 'months' in chronological order\n|                 return months.indexOf(a) - months.indexOf(b);\n|             },\n|         },\n|     ],\n| }\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup = true"}]},{"type":"text","value":" is defined on this column, the supplied "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"comparator"}]},{"type":"text","value":" will be used to sort the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"month"}]},{"type":"text","value":" column and\nthe Group Column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates custom group sorting. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"month"}]},{"type":"text","value":" column has a custom sort "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"comparator"}]},{"type":"text","value":" supplied which sorts months in chronological order."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The 'Group' Column uses the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"comparator"}]},{"type":"text","value":" defined on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"month"}]},{"type":"text","value":" column definition to sort the row groups. "}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Group Sort","name":"custom-group-sort","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":"It is also possible to define a comparator that will be used across all group levels using; "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef.comparator"}]},{"type":"text","value":".\nThis 'shared group comparator' will override over any comparators defined on the underlying columns."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"maintain-group-order","style":"position:relative;"},"children":[{"type":"text","value":"Maintain Group Order"},{"type":"element","tagName":"a","properties":{"href":"#maintain-group-order","ariaLabel":"maintain group order 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":"When sorting on non-group columns it may be desirable to maintain the existing group order. This behaviour can be\nenabled through the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupMaintainOrder"}]},{"type":"text","value":" grid option as shown below:"}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'assignee', rowGroup: true, hide: true },\n        { field: 'priority', rowGroup: true, hide: true },        \n        { field: 'task' },      \n    ],\n    groupDisplayType: 'multipleColumns',\n    // preserves current group order when sorting on non-group columns\n    groupMaintainOrder: true,\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that "},{"type":"element","tagName":"a","properties":{"href":"../grouping-group-order/"},"children":[{"type":"text","value":"Group Order"}]},{"type":"text","value":" is not the same as sorting. Maintaining group order will not preserve\nactive group sorts, just the current order of the groups. However, when sorting on group columns the group order will\nbe changed based on the sort."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates how "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupMaintainOrder"}]},{"type":"text","value":" works. Note the following:"}]},{"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":"groupMaintainOrder = true"}]},{"type":"text","value":" is defined on the grid options supplied to the grid. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking on the 'Task' column header only sorts the tasks without reordering the groups."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sorting on the 'Assignee' or 'Priority' group column headers will reorder the groups."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Maintain Group Order","name":"maintain-group-order","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"setfilter\"] }"},"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-filtering/"},"children":[{"type":"text","value":"Filtering Groups"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Row Grouping - Sorting Groups","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-group-sorting","depth":2,"value":"Enabling Group Sorting"},{"id":"mixed-group-sorting","depth":2,"value":"Mixed Group Sorting"},{"id":"custom-group-sorting","depth":2,"value":"Custom Group Sorting"},{"id":"maintain-group-order","depth":2,"value":"Maintain Group Order"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/grouping-sorting","pageName":"grouping-sorting"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}