Sorting

This page describes how to get your grid data sorting.

This page discusses sorting outside of the context of paging. To see how to implement server side sorting, see the sections pagination and virtual paging

Enable Sorting

Turn sorting on for the grid by enabling sorting in the grid options.

Sort a column by clicking on the column header. To do multi-column sorting, hold down shift while clicking the column header.

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.
  • No sort icon on the Year column.
  • Custom sorting on the Date column.

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 sortOrder 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 columns ignoring the groups, even if the column is displaying group data. This decoupling, although good design, has the drawback that the column doesn't realise it also needs to sort the groups. To get a column to sort the groups when sorting, you have to provide a custom comparator to the column. A custom comparator for groups is provided by agGrid and can be configured like the following:

// when using the ag-Grid bundle with global agGrid variable:
var groupColumn = {
    headerName: "Group",
    comparator: agGrid.defaultGroupComparator, // this is the important bit
    cellRenderer: {
        renderer: "group",
    }
};

// when using CommmonJS
import {defaultGroupComparator} from 'ag-grid/main';
var groupColumn = {
    headerName: "Group",
    comparator: defaultGroupComparator, // this is the important bit
    cellRenderer: {
        renderer: "group",
    }
};
    

You only need to worry about this if you are providing your own grouping column. If using the grid auto-group column, this comparator is used by default.