Editing (Angular)

Enable inline cell editing and the fill handle in the Angular grid with validators, custom editors, keyboard shortcuts, and clipboard-style range fill flows.

This Angular example is being written. See the React editing example for the conceptual model.

Interactive Demo

editable-grid.component.ts

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

@Component({
  selector: "app-editable-grid",
  standalone: true,
  imports: [GridComponent],
  template: `
    <div style="height: 400px">
      <gp-grid
        [columns]="columns"
        [rowData]="data"
        [rowHeight]="36"
      />
    </div>
  `,
})
export class EditableGridComponent {
  columns: ColumnDefinition[] = [
    { field: "name", cellDataType: "text", width: 150, editable: true },
    { field: "salary", cellDataType: "number", width: 120, editable: true },
  ];

  data = [/* your data */];
}