DataGrid Restricted Editing

Restrict DataGrid editing by column or row rules while keeping editable fields discoverable.

The following example demonstrates

Configuration

Show Remove Button

Restricted Fields (Read-Only)

Select fields that should not be editable:

Deadline and Budget are read-only while editing a row

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="inline"
      (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, editable: row => row.status !== 'Closed' },
    { 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

      // ColumnDef.editable supports boolean or callback.
{ field: 'manager', editable: false }
{ field: 'budget', editable: (row: Project) => row.status !== 'Closed' }

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.