{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/grouping-group-order/",
    "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 control the 'Group By' order and the default ordering of groups."}]},{"type":"element","tagName":"h2","properties":{"id":"row-group-by-order","style":"position:relative;"},"children":[{"type":"text","value":"Row 'Group By' Order"},{"type":"element","tagName":"a","properties":{"href":"#row-group-by-order","ariaLabel":"row group by 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":"By default, the grid will group rows based on the order of the supplied column definitions. To explicitly define the\nrow 'Group By' order, use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":" with / without "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup = true"}]},{"type":"text","value":" as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // index = 1, gets grouped second\n        { field: \"country\", hide: true, rowGroupIndex: 1 },\n        // index = 0, gets grouped first\n        { field: \"year\", hide: true, rowGroupIndex: 0 },\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the snippet above, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" has a lower "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":" than "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" which means it will be grouped first. The\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":" values can be any number that is either positive or zero and gaps are permitted. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows how the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":" can be used to ensure rows are grouped by 'year' first and then\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" even though the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"country"}]},{"type":"text","value":" column definition is supplied to the grid first."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Group Order","name":"row-group-order","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 500, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"initial-group-order","style":"position:relative;"},"children":[{"type":"text","value":"Initial Group Order"},{"type":"element","tagName":"a","properties":{"href":"#initial-group-order","ariaLabel":"initial 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":"The grid does not attempt to order the groups. The groups are presented on a 'first come, first served' basis. For example\nif grouping by country, and the first row is for country 'Ireland', then the first displayed group will be 'Ireland'."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For most scenarios, this will not be a problem as the user can sort the grouping column. However, this will be a problem\nin one of the following cases:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid is using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/grouping-group-rows"},"children":[{"type":"text","value":"Group Rows Display Type"}]},{"type":"text","value":", which means there are no columns associated with\nthe groups to order."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The groups have an implied order that should not require column sorting to achieve. For example grouping by month\n(January, February...) or other groups which have business meaning that require order e.g. [\"Severe\", \"Medium\", \"Low\"]\nor [\"Today\", \"Yesterday\", \"Older than 1 day\"]."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To provide a group order, you should supply "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"initialGroupOrderComparator"}]},{"type":"text","value":" callback to the grid. The callback is a standard\nJavaScript Array comparator that takes two values and compares them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows providing an initial group order. From the example the following can be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Groups are displayed using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/grouping-group-rows"},"children":[{"type":"text","value":"Group Rows Display Type"}]},{"type":"text","value":", i.e. there is no column to click to sort the groups."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Groups are ordered alphabetically using a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"initialGroupOrderComparator"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Initial Group Order","name":"default-group-order","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 515, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"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 the "},{"type":"element","tagName":"a","properties":{"href":"../grouping-sticky-groups/"},"children":[{"type":"text","value":"Sticky Groups"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Row Grouping - Group Order","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"row-group-by-order","depth":2,"value":"Row 'Group By' Order"},{"id":"initial-group-order","depth":2,"value":"Initial Group Order"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/grouping-group-order","pageName":"grouping-group-order"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}