CODEWITHSUNDEEP
htmlangularprimeng
nless
nless

Reputation: 166

Does anyone know how to add a row to PrimeNg DataTable

I'm trying to add a new row to the current table so that I can have a row under the list of data that can have a save button and an insert to be done e.g. save phone number. I have added html comments of where the new row will go but not sure how to do it in PrimeNg.

See the code below:

<div class="m_datatable m-datatable m-datatable--default m-datatable--loaded">
    <p-dataTable [value]="personPhone.phones"
                 emptyMessage="{{l('NoData')}}"
                 paginator="false"
                 rows="5"
                 tableStyleClass="m-datatable__table">

        <p-column header="{{l('Actions')}}" [style]="{'width':'130px','text-align':'center'}">
            <ng-template let-record="rowData" pTemplate="body">
                <button (click)="deletePhone(phone, personPhone)" class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill">
                    <i class="fa fa-times"></i>
                </button>
            </ng-template>
        </p-column>

        <p-column header="{{l('PhoneType')}}">
            <ng-template let-record="rowData" pTemplate="body">
                {{getPhoneTypeAsString(record.type)}}
            </ng-template>
        </p-column>

        <p-column header="{{l('PhoneNumber')}}">
            <ng-template let-record="rowData" pTemplate="body">
                {{record.number}}
            </ng-template>
        </p-column>

        <!--New row to go here-->

    </p-dataTable>
</div>

I Just want a row like this:

<tr>
    <td>
        <button (click)="savePhone()" class="btn btn-sm btn-success">
            <i class="fa fa-floppy-o"></i>
        </button>
    </td>
    <td>
        <select name="Type" [(ngModel)]="newPhone.type" class="form-control">
            <option value="0">{{l("Mobile")}}</option>
            <option value="1">{{l("Home")}}</option>
            <option value="2">{{l("Business")}}</option>
        </select>
    </td>
    <td><input type="text" name="number" [(ngModel)]="newPhone.number" class="form-control" /></td>
</tr>

Upvotes: 3

Views: 8276

Answers (1)

DirtyMind
DirtyMind

Reputation: 2591

First find the length of the data what you are getting like below?

public dataLength:number;    
this.myService.getAllResult('query)
          .subscribe((response: any[]) => {
            this.data = response
            this.dataLength = this.data.length;
     }

Now in p-template body take another row and use *ngIf and check the dataLength is greater than or equal to current Index:

<ng-template pTemplate="body" let-i="rowIndex" let-data>
          <tr>
              <td>{{i + 1}}</td>
              <td>{{data.name}}</td>
              <td>{{data.email}}</td>

          </tr>
          <tr *ngIf="i >= (dataLength -1)">Print your data</tr>
      </ng-template>

I think there should be something like $last and $first index in primeNg as we have in angular for *ngFor.
If we find the last index in Prime Ng. Then no need to take the another dataLength. But Above solution should work for you.

Upvotes: 4

Related Questions