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 with a drag handle or by dragging the entire row.

Interactive Demo

Angular-specific code samples below.

draggable-rows-grid.component.ts

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

@Component({
  selector: "app-draggable-rows-grid",
  standalone: true,
  imports: [GridComponent],
  template: `
    <div style="height: 400px">
      <gp-grid
        [columns]="columns"
        [rowData]="data"
        [rowHeight]="36"
        [rowDraggable]="true"
      />
    </div>
  `,
})
export class DraggableRowsGridComponent {
  columns: ColumnDefinition[] = [/* ... */];
  data = [/* ... */];
}