Column Dragging (Angular)

Let users reorder columns in the Angular grid by dragging their headers, with persistent ordering, locked columns, and reset-to-default support today.

Reorder columns by dragging their headers.

Interactive Demo

Angular-specific code samples below.

draggable-columns-grid.component.ts

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

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