Sorting (Angular)

Enable single and multi-column sorting in the Angular grid, including custom comparators, programmatic sort state, and persistent sort indicators here.

gp-grid supports single and multi-column sorting.

Basic Sorting

Sorting is enabled by default. Click a column header to sort:

sortable-grid.component.ts

import { Component } from "@angular/core";
import { GridComponent, type ColumnDefinition } from "@gp-grid/angular";

@Component({
  selector: "app-sortable-grid",
  standalone: true,
  imports: [GridComponent],
  template: `
    <div style="height: 400px">
      <gp-grid
        [columns]="columns"
        [rowData]="data"
        [rowHeight]="36"
        [sortingEnabled]="true"
      />
    </div>
  `,
})
export class SortableGridComponent {
  columns: ColumnDefinition[] = [
    { field: "id", cellDataType: "number", width: 80, headerName: "ID" },
    { field: "name", cellDataType: "text", width: 150, headerName: "Name" },
    { field: "salary", cellDataType: "number", width: 120, headerName: "Salary" },
  ];

  data = [/* your data */];
}

Multi-Column Sorting

Hold Shift while clicking headers to sort by multiple columns.

Disable Sorting

Globally

template: `
  <gp-grid
    [columns]="columns"
    [rowData]="data"
    [rowHeight]="36"
    [sortingEnabled]="false"
  />
`

Per Column

columns: ColumnDefinition[] = [
  { field: "id", cellDataType: "number", width: 80, sortable: false },
  { field: "name", cellDataType: "text", width: 150, sortable: true },
];

Sort Indicators

The header displays sort direction:

▲ - Ascending
▼ - Descending
Number badge for multi-column sort order