Angular Data GridRow Sorting

angular logo

This page describes how to sort row data in the grid and how you can customise that sorting to match your requirements.

Sorting

Sorting is enabled by default for all columns. You can sort a column by clicking on the column header. To enable / disable sorting per column use the sortable column definition attribute.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

this.columnDefs = [
    { field: 'name' },
    { field: 'age' },
    // disable sorting by address
    { field: 'address', sortable: false },
];

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

<ag-grid-angular
    [defaultColDef]="defaultColDef"
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

// disable sorting on all columns
this.defaultColDef = {
    sortable: false
};
this.columnDefs = [
    // Override default to enable sorting by name
    { field: 'name', sortable: true },
    { field: 'age' },
    { field: 'address' },
];

Custom Sorting

Custom sorting is provided at a column level by configuring a comparator on the column definition.