DataGrid In-Cell Editing

Edit individual DataGrid cells directly and commit changes from cell blur or keyboard interaction.

The following example demonstrates

Click any cell to edit directly. Navigate with arrow keys, press Enter to save.

Code snippet

Grid example - component setup and template binding

      import { Component } from '@angular/core';
import { ColumnDef, Datagrid } from '@angular-bootstrap/ngbootstrap';

interface Order { id: number; customer: string; quantity: number; status: string; }
@Component({
  standalone: true,
  imports: [Datagrid],
  template: `
    <ngb-datagrid [columns]="columns" [data]="rows" [trackBy]="rowKey"
      [enableEdit]="true" editMode="incell"
      (rowSave)="save($event.updated)" />
  `,
})
export class OrdersPage {
  rows: Order[] = [
    { id: 1, customer: 'Cedar Supply', quantity: 4, status: 'Open' },
    { id: 2, customer: 'Harbor Studio', quantity: 8, status: 'Closed' },
  ];
  readonly rowKey = (_index: number, row: Order) => row.id;
  readonly columns: ColumnDef<Order>[] = [
    { field: 'id', header: 'Order', editable: false },
    { field: 'customer', header: 'Customer', required: true },
    { field: 'quantity', header: 'Quantity', type: 'number', required: true },
    { field: 'status', header: 'Status', editable: false },
  ];
  save(updated: Order): void {
    // Keep app state in sync; send updated to your API here if needed.
    this.rows = this.rows.map(row => row.id === updated.id ? updated : row);
  }
}

API notes - key inputs, outputs, and column properties

      // In-cell mode keeps row actions minimal.
editMode = 'incell' as const;
editOnRowClick = true;

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 the row to remove. The application owns confirmation, persistence and updating the bound data.
`editOnRowClick`	`boolean`	`-`	Allows row click to enter edit interaction where configured.
`ColumnDef.type`	`ColumnType`	`-`	Determines the editor rendered for each editable cell.