Row Sorting

This page describes how to get your grid data sorting. Row sorting works with all frameworks eg Angular and React as well as plain JavaScript.

Enable Sorting

Enable sorting for columns by setting the sortable column definition attribute. Then sort a column by clicking on the column header.

gridOptions: { // enable sorting on name and age columns only columnDefs: [ {field: 'name', sortable: true}, {field: 'age', sortable: true}, {field: 'address'}, ] }

To enable sorting for all columns, set sorting in the default column definition.

gridOptions: { // enable sorting on all columns by default defaultColDef: { sortable: true }, columnDefs: [ {field: 'name'}, {field: 'age'}, // suppress sorting on address column {field: 'address', sortable: false}, ] }

Custom Sorting

Custom sorting is provided at a column level by configuring a comparator on the column definition. The sort methods gets the value as well as the row nodes.

colDef.comparator = function (valueA, valueB, nodeA, nodeB, isInverted) { return valueA - valueB; }

Example: Custom Sorting

Example below shows the following:

  • Default sorting on the Athlete column.
  • When the year column is not sorted, it shows a custom icon, (up/down arrow).
  • The date column has strings as the row data, there is custom comparator so that when you sort this column it sorts it as dates, not as strings.

Multi Column Sorting

It is possible to sort by multiple columns. The default action for multiple column sorting is for the user to hold down shift while clicking the column header. To change the default action to use the Control key (or Cmd key on Apple) instead set the property multiSortKey='ctrl'.

The example below demonstrates the following:

  • The grid sorts by Country then Athlete by default.
  • The property multiSortKey='ctrl' is set so multiple column selection is achieved by holding down Control and selecting multiple columns.

Sorting Animation

To enable animation of the rows after sorting, set grid property animateRows=true.

Sorting Order

By default, the sorting order is as follows:

ascending -> descending -> none.

In other words, when you click a column that is not sorted, it will sort ascending. The next click will make it sort descending. Another click will remove the sort.

It is possible to override this behaviour by providing your own sortingOrder on either the gridOptions or the colDef. If defined both in colDef and gridOptions, the colDef will get preference, allowing you to defined a common default, and then tailoring per column.

Example: Sorting Order and Animation

The example below shows animation of the rows plus different combinations of sorting orders as follows:

  • Grid Default: ascending -> descending -> no sort
  • Column Athlete: ascending -> descending
  • Column Age: descending -> ascending
  • Column Country: descending -> no sort
  • Column Year: ascending only

Sorting API

Sorting can be controlled via the Sorting API via the following methods:

  • setSortModel(sortModel): To set the sort.
  • getSortModel(): To return the state of the currently active sort.

Both methods work with a list of sort objects, each object containing a sort field and direction. The order of the sort objects depicts the order in which the columns are sorted. For example, the below array represents the model of firstly sorting by country ascending, and then by sport descending.

[ {colId: 'country', sort: 'asc'}, {colId: 'sport', sort: 'desc'} ]

Example: Sorting API

The example below shows the API in action.

Sorting Groups

The grid sorts using a default comparator for grouped columns, if you want to specify your own, you can do so specifying it in the colDef:

var groupColumn = { headerName: "Group", comparator: [yourOwnComparator], // this is the important bit cellRenderer: { renderer: "agGroupCellRenderer", } };

Accented sort

By default sorting doesn't take into consideration locale specific characters, if you need to make your sort locale specific you can configure this by setting the property gridOptions.accentedSort = true

Using this feature is more expensive, if you need to sort a very large amount of data, you might find that this causes the sort to be noticeably slower.

The following example is configured to use this feature.

Post Sort

It is also possible to perform some post sorting if you require additional control over the sorted rows.

This is provided via the grid callback function: gridOptions.postSort as shown below:

gridOptions.postSort(rowNodes) { // here we put Ireland rows on top while preserving the sort order function isIreland(node) { return node.data.country === "Ireland"; } function move(toIndex, fromIndex) { rowNodes.splice(toIndex, 0, rowNodes.splice(fromIndex, 1)[0]); } var nextInsertPos = 0; for (var i = 0; i < rowNodes.length; i++) { if (isIreland(rowNodes[i])) { move(nextInsertPos, i) nextInsertPos++; } } }

The following example uses this configuration to perform a post sort on the rows.