Edit in place
Double-click a cell to edit it inline. Enter or click-away commits; Escape cancels; Tab moves to the next editable cell. Every column uses a different editor type. Toggle async saving to see the pessimistic save flow (busy state, error + retry).
Double-click a cell to start editing.
| ID | Name | Notes | Age | Start date | Active | Office | Skills | Rating |
|---|
<table dtTable dtEditable class="display" style="width:100%"
[dtData]="people" [dtColumns]="columns()"
[dtSave]="save"
(dtCellEdit)="onSaved($event)"
(dtCellEditError)="onError($event)">
<thead>
<tr><th>Name</th><th>Office</th><th>Skills</th><th>Rating</th></tr>
</thead>
</table>
<!-- A custom editor: any Angular control. Call commit(value) / cancel() from the context. -->
<ng-template #ratingTpl let-value let-commit="commit" let-cancel="cancel">
@for (n of [1,2,3,4,5]; track n) {
<button type="button" (click)="commit(n)">{{ n <= value ? '★' : '☆' }}</button>
}
<button type="button" (click)="cancel()">✕</button>
</ng-template>