DataGrid editing

Choose an editing mode

Restricted editing applies read-only rules to fields and rows. Adding rows covers defaults and inserting new records. These features build on the modes above.

Start with an editable grid

The following example demonstrates a complete local editing flow. Save updates the app’s array, Add inserts a new record and Delete removes it. Refreshing the page resets this in-memory data.

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

interface Order { id: number; customer: string; quantity: number; }

@Component({
  standalone: true,
  imports: [Datagrid],
  template: `
    <ngb-datagrid [columns]="columns" [data]="rows()" [trackBy]="rowKey"
      editMode="inline" [enableEdit]="true" [enableAdd]="true"
      [enableDelete]="true" [newRowDefaults]="{ quantity: 1 }"
      (rowSave)="save($event.updated)" (rowAdd)="add($event.newRow)"
      (rowDelete)="remove($event.row.id)" />
  `,
})
export class OrdersPage {
  readonly rows = signal<Order[]>([{ id: 1, customer: 'Cedar Supply', quantity: 4 }]);
  private nextId = 2;
  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 },
  ];
  save(updated: Order): void {
    this.rows.update(rows => rows.map(row => row.id === updated.id ? updated : row));
  }
  add(draft: Order): void {
    this.rows.update(rows => [...rows, { ...draft, id: this.nextId++ }]);
  }
  remove(id: number): void {
    this.rows.update(rows => rows.filter(row => row.id !== id));
  }
}
    

Configure fields and validation

enableEdit, enableAdd and enableDelete each default to false. Enable only the actions your workflow supports. Columns are editable by default once editing is enabled; set editable: false for identifiers or computed values.

ColumnDef.type selects text, email, number, date, boolean or select editors. Select columns also need options with label/value pairs. required: true rejects empty non-boolean fields; email, number and date columns also validate their values.

Use editable: (row, isNew) => boolean for conditional rules. A checkbox may be false even when marked required; use application validation when a value must be true. Custom ngbEditor templates must connect their controls to the supplied form. Server-side validation and authorization remain your application’s responsibility.

Keep application data in sync

• rowSave carries original, updated and the data index after saving an existing row. The default service updates the grid’s local row; update your app’s array or store too.
• rowAdd carries newRow after a valid new-record form is saved. Insert the returned record into your bound data. It does not also emit rowSave.
• rowDelete carries the row and data index. Remove that record from the bound data after your application’s confirmation or persistence workflow.
• rowCancel reports cancellation of an existing-row edit. Cancel leaves the saved values unchanged.

For a backend, send changes through your data service and replace local records with the server response. Show failures and restore authoritative data when needed. The grid does not supply HTTP endpoints, server transactions or a delete-confirmation dialog. NgbDatagridEditService customizes local editing operations through synchronous methods.