Row Dragging (Angular)

Allow users to reorder rows in the Angular grid via drag-and-drop, with handle-based dragging, drop indicators, and event hooks for persistence logic.

Reorder rows through a mutable data source. The callback receives the row identity and named view indices.

Interactive demo

Angular example

draggable-rows-grid.component.ts

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

@Component({
  selector: "app-draggable-rows-grid",
  standalone: true,
  imports: [GpGridComponent],
  template: `
    <div style="height: 400px">
      <gp-grid
        [columns]="columns"
        [dataSource]="grid.dataSource"
        [rowHeight]="36"
        [rowDragEntireRow]="true"
        (onRowDragEnd)="handleRowDragEnd($event)"
      />
    </div>
  `,
})
export class DraggableRowsGridComponent {
  readonly columns: ColumnDefinition[] = [
    { field: "id", cellDataType: "number", width: 80 },
    { field: "task", cellDataType: "text", width: 240 },
  ];
  readonly grid = createGridData([
    { id: 1, task: "Review release notes" },
    { id: 2, task: "Upgrade application" },
  ], { getRowId: (row) => row.id });

  handleRowDragEnd({ fromViewIndex, toViewIndex }: RowDragEndEvent) {
    this.grid.dataSource.moveRow?.(fromViewIndex, toViewIndex);
  }
}

For a dedicated handle, set rowDrag: true on a column and omit rowDragEntireRow. Row dragging is disabled while a hierarchy is bound. See the migration guide.