{
    "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":"element","tagName":"a","properties":{"href":"#enabling-group-sorting","ariaLabel":"enabling group sorting 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 Sorting"}]},{"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":"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":"When using the "},{"type":"element","tagName":"a","properties":{"href":"../grouping-group-rows/"},"children":[{"type":"text","value":"Group Rows Display Type"}]},{"type":"text","value":" there are no group columns to sort by, however row\ngroups can still be ordered through the "},{"type":"element","tagName":"a","properties":{"href":"../grouping-group-order/#default-group-order"},"children":[{"type":"text","value":"Default Group Order"}]},{"type":"text","value":". "}]}]}]},{"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":"custom-group-sorting","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-group-sorting","ariaLabel":"custom group sorting 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":"Custom Group Sorting"}]},{"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 take precedence over any comparators defined on the underlying columns."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"maintain-group-order","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#maintain-group-order","ariaLabel":"maintain group order 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":"Maintain Group Order"}]},{"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":{},"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":"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 "},{"type":"element","tagName":"a","properties":{"href":"../grouping-filtering/"},"children":[{"type":"text","value":"Row Group Filtering"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Row Grouping - Sorting Groups","version":null,"enterprise":true,"description":null},"headings":[{"id":"enabling-group-sorting","depth":2,"value":"Enabling 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","angular","react","vue"],"framework":"angular","srcPath":"/grouping-sorting","pageName":"grouping-sorting"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}