DataGrid Sorting

Sort Angular DataGrid rows by configured columns with keyboard-accessible headers, sort descriptors, and state events.

Sorting

Code snippet

Grid example - component setup and template binding

      import { Component } from '@angular/core';
import { ColumnDef, Datagrid } from '@angular-bootstrap/ngbootstrap';

@Component({
  standalone: true,
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="rows"
      [enableSorting]="true"
      (sortChange)="activeSort = $event"
    ></ngb-datagrid>
  `,
})
export class ProductSortingDemo {
  activeSort: unknown;

  readonly columns: ColumnDef<ProductRow>[] = [
    { field: 'productName', header: 'Product Name', sortable: true, width: 240 },
    { field: 'category', header: 'Category', sortable: true, width: 180 },
    { field: 'price', header: 'Price', type: 'number', sortable: true, width: 140 },
    { field: 'lastOrdered', header: 'Last Ordered', type: 'date', sortable: true, width: 180 },
  ];

  readonly rows: ProductRow[] = inventoryRows;
}

API notes - key inputs, outputs, and column properties

      // Sorting API
enableSorting = true;

columns: ColumnDef<ProductRow>[] = [
  { field: 'name', header: 'Name', sortable: true },
  { field: 'notes', header: 'Notes', sortable: false },
];

onSortChange(sort: unknown): void {
  // Use this output for remote sorting or analytics.
}

API Information

Property	Type	Default	Description
`enableSorting`	`boolean`	`-`	Enables the grid sorting behavior globally.
`ColumnDef.sortable`	`boolean`	`-`	Marks an individual column as sortable.
`sortChange`	`EventEmitter`	`-`	Emits when the active sort field or direction changes.