Examples
Column Dragging
Reorder columns by dragging headers in Angular
Column Dragging
Reorder columns by dragging their headers.
Interactive Demo
Angular-specific code samples below.
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 = [/* ... */];
}