How to add new row to ngx-datatable with input data from user?

Question

How can I add a new row to an ngx-datatable based on user input?

I add an empty row like this:

addRow() {
  this.rows.unshift({unique_id: '<em>empty</em>', name: '<em>empty</em>'});
  this.rows = this.rows.slice();
}

But how can I control the row so a user can add data to that row?

Answer 1

change your component.html to loop over all labels

 <ngx-datatable #mydatatable class="material" [headerHeight]="50" [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'" [rows]="rows" [scrollbarH]="true"> <ngx-datatable-column *ngFor="let label of labels" [name]="label.name" [prop]="label.prop"> <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row"> <span title="double Click here " (dblclick)="editCell(label.prop, rowIndex)" *ngIf="!editing[rowIndex + '-' + label.prop]" > {{ value }} </span> <input autofocus (blur)="updateValue($event, label.prop, rowIndex)" (keyup.enter)="updateValue($event, label.prop, rowIndex)" *ngIf="editing[rowIndex+ '-' + label.prop]" [type]="label.inputType" class="form-control" [value]="value" /> </ng-template> </ngx-datatable-column> </ngx-datatable> 

Then add these methods into your component.ts

 @Component({ selector: 'app-mycomponent', templateUrl: './mycomponent.component.html', styleUrls: ['./mycomponent.component.css'] }) export class MyComponent{ editing = {}; rows = []; labels = []; // call to update cell value updateValue(event, cell, rowIndex) { this.editing[rowIndex + '-' + cell] = false; this.rows[rowIndex][cell] = event.target.value; this.rows = [...this.rows]; } // call on double click in cell editCell(cell, rowIndex) { this.editing = {}; this.editing[rowIndex + '-' + cell] = true; } }