{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/row-sorting/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This page describes how to sort row data in the grid and how you can customise that sorting to match your requirements. "}]},{"type":"element","tagName":"h2","properties":{"id":"enable-sorting","style":"position:relative;"},"children":[{"type":"text","value":"Enable Sorting"},{"type":"element","tagName":"a","properties":{"href":"#enable-sorting","ariaLabel":"enable 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":"Enable sorting for columns by setting the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortable"}]},{"type":"text","value":" column definition attribute.\nYou can then sort a column by clicking on the column header."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // enable sorting on 'name' and 'age' columns only\n    columnDefs: [\n        { field: 'name', sortable: true },\n        { field: 'age', sortable: true },\n        { field: 'address' },\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To enable sorting for all columns, set sorting in the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/column-definitions/"},"children":[{"type":"text","value":"default column definition"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // enable sorting on all columns by default\n    defaultColDef: {\n        sortable: true\n    },\n    columnDefs: [\n        { field: 'name' },\n        { field: 'age' },\n        // suppress sorting on address column\n        { field: 'address', sortable: false },\n    ],\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"custom-sorting","style":"position:relative;"},"children":[{"type":"text","value":"Custom Sorting"},{"type":"element","tagName":"a","properties":{"href":"#custom-sorting","ariaLabel":"custom 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":"Custom sorting is provided at a column level by configuring a comparator on the 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":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // enable sorting on all columns by default\n    defaultColDef: {\n        sortable: true\n    },\n    columnDefs: [\n        {\n            field: 'age',\n            // simple number comparator\n            comparator: (valueA, valueB, nodeA, nodeB, isDescending) => valueA - valueB\n        },\n        {\n            field: 'name',\n            // simple string comparator\n            comparator: (valueA, valueB, nodeA, nodeB, isDescending) => {\n                if (valueA == valueB) return 0;\n                return (valueA > valueB) ? 1 : -1;\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"h3","properties":{"id":"custom-sorting-example","style":"position:relative;"},"children":[{"type":"text","value":"Custom Sorting Example"},{"type":"element","tagName":"a","properties":{"href":"#custom-sorting-example","ariaLabel":"custom sorting example 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":"Example below shows the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Default sorting on the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" column is not sorted, it shows a custom icon (up/down arrow)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" column has strings as the row data, but has a custom comparator so that when you sort this column it sorts as dates, not as strings."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Sorting","name":"custom-sorting","type":"generated"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"custom-sorting-groups-example","style":"position:relative;"},"children":[{"type":"text","value":"Custom Sorting Groups Example"},{"type":"element","tagName":"a","properties":{"href":"#custom-sorting-groups-example","ariaLabel":"custom sorting groups example 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 "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/grouping/"},"children":[{"type":"text","value":"Row Grouping"}]},{"type":"text","value":" it is possible to override the sort order of the Row Group columns. If using the Auto Group Column, provide a comparator via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":" grid property."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nvar gridOptions = {\n    autoGroupColumnDef: {\n        field: 'athlete',\n        comparator: function(valueA, valueB, nodeA, nodeB, isDescending) {\n            return (valueA == valueB) ? 0 : (valueA > valueB) ? 1 : -1;\n        },\n    }\n};\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Sorting Groups","name":"custom-sorting-groups","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\" ] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"multi-column-sorting","style":"position:relative;"},"children":[{"type":"text","value":"Multi Column Sorting"},{"type":"element","tagName":"a","properties":{"href":"#multi-column-sorting","ariaLabel":"multi column 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":"It is possible to sort by multiple columns. The default action for multiple column sorting is for\nthe user to hold down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" while clicking the column header. To change the default action to use\nthe "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" key (or "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Command"}]},{"type":"text","value":" key on Apple) instead set the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"multiSortKey='ctrl'"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid sorts by "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" then "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" by default."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"multiSortKey='ctrl'"}]},{"type":"text","value":" is set so multiple column sorting is achieved by holding down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" (or "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Command"}]},{"type":"text","value":" on Apple) and selecting multiple columns."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Multi Column Sort","name":"multi-column","type":"generated"},"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":"You can suppress the multi sorting behaviour by enabling the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressMultiSort"}]},{"type":"text","value":" option, or force the behaviour without key press by enabling\nthe "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"alwaysMultiSort"}]},{"type":"text","value":" option."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"sorting-animation","style":"position:relative;"},"children":[{"type":"text","value":"Sorting Animation"},{"type":"element","tagName":"a","properties":{"href":"#sorting-animation","ariaLabel":"sorting animation 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 enable animation of the rows after sorting, set grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"animateRows=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"sorting-order","style":"position:relative;"},"children":[{"type":"text","value":"Sorting Order"},{"type":"element","tagName":"a","properties":{"href":"#sorting-order","ariaLabel":"sorting 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 sorting order is as follows:"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ascending -> descending -> none"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In other words, when you click a column that is not sorted, it will sort ascending. The next click\nwill make it sort descending. Another click will remove the sort."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to override this behaviour by providing your own "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortingOrder"}]},{"type":"text","value":" on either\nthe "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions"}]},{"type":"text","value":" or the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef"}]},{"type":"text","value":". If defined both in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef"}]},{"type":"text","value":" and\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions"}]},{"type":"text","value":", the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef"}]},{"type":"text","value":" will get preference, allowing you to define a common default,\nand then tailor per column."}]},{"type":"element","tagName":"h2","properties":{"id":"example-sorting-order-and-animation","style":"position:relative;"},"children":[{"type":"text","value":"Example: Sorting Order and Animation"},{"type":"element","tagName":"a","properties":{"href":"#example-sorting-order-and-animation","ariaLabel":"example sorting order and animation 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 example below shows animation of the rows plus different combinations of sorting orders as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Default Columns:"}]},{"type":"text","value":" descending -> ascending -> no sort"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Column Athlete:"}]},{"type":"text","value":" ascending -> descending"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Column Age:"}]},{"type":"text","value":" descending -> ascending"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Column Country:"}]},{"type":"text","value":" descending -> no sort"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Column Year:"}]},{"type":"text","value":" ascending only"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Sorting Order and Animation","name":"sorting-order-and-animation","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"sorting-api","style":"position:relative;"},"children":[{"type":"text","value":"Sorting API"},{"type":"element","tagName":"a","properties":{"href":"#sorting-api","ariaLabel":"sorting 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":"What sorting is applied is controlled via "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.1/column-state/"},"children":[{"type":"text","value":"Column State"}]},{"type":"text","value":". The below examples uses the Column State API to control column sorting."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Sorting API","name":"sorting-api","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"accented-sort","style":"position:relative;"},"children":[{"type":"text","value":"Accented Sort"},{"type":"element","tagName":"a","properties":{"href":"#accented-sort","ariaLabel":"accented sort 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 sorting doesn't take into consideration locale-specific characters. If you need to make your sort\nlocale-specific you can configure this by setting the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"accentedSort = true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using this feature is more expensive; if you need to sort a very large amount of data, you might find that this\ncauses the sort to be noticeably slower."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example is configured to use this feature."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Accented Sort","name":"accented-sort","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"post-sort","style":"position:relative;"},"children":[{"type":"text","value":"Post-Sort"},{"type":"element","tagName":"a","properties":{"href":"#post-sort","ariaLabel":"post sort 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":"It is also possible to perform some post-sorting if you require additional control over the sorted rows."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is provided via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"postSortRows"}]},{"type":"text","value":" grid callback function as shown below:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"sort","names":"[\"postSortRows\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    postSortRows: params => {\n        let rowNodes = params.rowNodes;\n        // here we put Ireland rows on top while preserving the sort order\n        let nextInsertPos = 0;\n        for (let i = 0; i < rowNodes.length; i++) {\n            const country = rowNodes[i].data.country;\n            if (country === 'Ireland') {\n                rowNodes.splice(nextInsertPos, 0, rowNodes.splice(i, 1)[0]);\n                nextInsertPos++;\n            }\n        }\n    }\n};\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example uses this configuration to perform a post-sort on the rows. The custom function\nputs rows with Ireland at the top always."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Post Sort","name":"post-sort","type":"generated"},"children":[]}]}]},"frontmatter":{"title":"Row Sorting","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"enable-sorting","depth":2,"value":"Enable Sorting"},{"id":"custom-sorting","depth":2,"value":"Custom Sorting"},{"id":"custom-sorting-example","depth":3,"value":"Custom Sorting Example"},{"id":"custom-sorting-groups-example","depth":3,"value":"Custom Sorting Groups Example"},{"id":"multi-column-sorting","depth":2,"value":"Multi Column Sorting"},{"id":"sorting-animation","depth":2,"value":"Sorting Animation"},{"id":"sorting-order","depth":2,"value":"Sorting Order"},{"id":"example-sorting-order-and-animation","depth":2,"value":"Example: Sorting Order and Animation"},{"id":"sorting-api","depth":2,"value":"Sorting API"},{"id":"accented-sort","depth":2,"value":"Accented Sort"},{"id":"post-sort","depth":2,"value":"Post-Sort"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"vue","srcPath":"/row-sorting","pageName":"row-sorting"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}