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"
[enableAdd]="true" [newRowDefaults]="defaults" (rowAdd)="add($event.newRow)"
(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 {
this.rows = this.rows.map(row => row.id === updated.id ? updated : row);
}
readonly defaults = { quantity: 1, status: 'Open' };
private nextId = 3;
add(draft: Order): void {
this.rows = [...this.rows, { ...draft, id: this.nextId++, status: 'Open' }];
}
}