DataGrid Feature Guide

Editing

Code snippet

Grid example - component setup and template binding

      @Component({
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="projects"
      [enableEdit]="true"
      [enableDelete]="true"
      [editMode]="'inline'"
      (rowSave)="saveProject($event)"
    ></ngb-datagrid>
  `,
})
export class InlineEditingDemo {
  readonly columns: ColumnDef<Project>[] = [
    { field: 'projectName', header: 'Project Name', editable: true, required: true },
    { field: 'status', header: 'Status', type: 'select', options: statusOptions, editable: true },
    { field: 'priority', header: 'Priority', type: 'select', options: priorityOptions, editable: true },
  ];
}

API notes - key inputs, outputs, and column properties

      saveProject(event: unknown): void {
  // Commit the saved row to your API or state store.
}

API Information

Property	Type	Default	Description
`enableEdit`	`boolean`	`-`	Enables built-in edit actions and edit state.
`enableDelete`	`boolean`	`-`	Shows delete actions when deleting rows is allowed.
`editMode`	`"inline" \| "incell" \| "external" \| "toolbar"`	`-`	Selects the active editing interaction model.
`ColumnDef.editable`	`boolean \| (row, isNew) => boolean`	`-`	Controls whether a field can be edited.
`ColumnDef.required`	`boolean`	`-`	Prevents saving an empty required field.
`rowSave`	`EventEmitter`	`-`	Emits when an edited row is saved.
`rowDelete`	`EventEmitter`	`-`	Emits when a row delete action is confirmed.