How to add a new editable row in primeng?

hanushi 0
Viewed 53

I want create a new editable row by default when clicking "ADD NEW button". like below screen shot. When I click "+" button a new row will create. once I edit that row and click "done" button the new row will submit.

enter image description here

I have tries below code. a new row created but without editable option. See below screen shot. I want create a new editable row when clicking add new button. enter image description here


  addNew() {
    let newData: IStoreStaffDesignation = {
      storeStaffDesignationId: '2',
      schoolBaseCode: '',
      code: '',
      name: '',
      description: '',
      nameTamil: '',
      nameSinhala: '',
      sortOrder: 0,
      appUserBaseId: ''
    };
    this.storeStaffDesignations.unshift(newData);

    //TODO : call api
  }

  <p-table #dt1 [value]="storeStaffDesignations" [rowHover]="true" [paginator]="true" [rows]="10" [showCurrentPageReport]="true"
            responsiveLayout="scroll" [resizableColumns]="true"
            [lazy]="true" (onLazyLoad)="lazyLoadHandler($event)" [loading]="loading"
            currentPageReportTemplate="Showing {{first}} to {{last}} of {{totalRecords}} entries"
            [rowsPerPageOptions]="[10, 25, 50]" editMode="row" dataKey="storeStaffDesignationId"
            [globalFilterFields]="['code', 'name', 'description']" [(selection)]="selectedStoreStaffDesignation"
            styleClass="p-datatable-striped p-datatable-gridlines"
            >
     // header template removed
     // body
     <ng-template pTemplate="body" let-storeStaffDesignation let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="storeStaffDesignation" style="height: 1rem" [class]="'storeStaffDesignation' +storeStaffDesignation.storeStaffDesignationId">
          // td tag removed
        </tr>
     // rest of the rows
     </ng-template >
 </ptable>

Anyone has a example for this

angular11 primeng-datatable primeng-table primeng angular
1 Answers

Here is my simple approach:

//HTML
<button (click)=onAddNewRow()>Add new Product</button>

//TS
onAddNewRow(){
  this.products.unshift({});
}

Forked from prime's docs

Pretty much the same as yours, I didn't check your template but I don't think we need to change the template at all.
The reason is product/data is a collection and we are updating it within our component, the template should reflect automatically.

userXxOk0
Related