DataGrid Row Reordering

Drag and reorder DataGrid rows with stable trackBy keys and rowReorder events.

Rows

Drag rows to reorder the dataset.

Row reordering

Row reordering lets users reprioritize records directly in the grid. The grid updates the visible order and emits the reordered data so the application can persist it.

How to use it

Enable [rowReorderable] to show row drag handles and allow users to reorder the current dataset.
Listen to (rowReorder) and persist event.data when the new order should update application state or an API.
Disable row selection for reorder-only examples when drag interactions should be the primary row action.
Use trackBy with a stable row key so Angular keeps row identity stable while users drag rows.

Grid example - component setup and template binding

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

@Component({
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="orders"
      [rowReorderable]="true"
      [selectionMode]="'none'"
      [trackBy]="trackOrder"
      (rowReorder)="onRowReorder($event)"
    ></ngb-datagrid>
  `,
})
export class RowReorderDemo {
  columns: ColumnDef<OrderRow>[] = [
    { field: 'orderNumber', header: 'Order #', width: 180 },
    { field: 'customerName', header: 'Customer', width: 220 },
    { field: 'status', header: 'Status', width: 160 },
  ];

  onRowReorder(event: { row: OrderRow; fromIndex: number; toIndex: number; data: OrderRow[] }): void {
    this.orders = event.data;
  }

  trackOrder = (_: number, row: OrderRow) => row.id;
}

API notes - practical integration details

      // Persisting order after a drop
onRowReorder(event: { row: OrderRow; fromIndex: number; toIndex: number; data: OrderRow[] }): void {
  this.orders = event.data;
  this.orderService.saveOrder(event.data.map((row) => row.id));
}

API Information

Property	Type	Default	Description
`rowReorderable`	`boolean`	`-`	Enables drag handles and row drop behavior.
`rowReorder`	`EventEmitter<{ row; fromIndex; toIndex; data }>`	`-`	Emits after a row drop with the moved row, original index, destination index, and updated data order.
`selectionMode`	`NgbSelectionMode`	`-`	Can be set to none for a reorder-only interaction.
`trackBy`	`NgbDatagridTrackByFn<T>`	`-`	Keeps row identity stable during drag and reorder operations.

Drag and drop to reprioritize 12 queued orders

Drag rows to change execution priority