How to add new row(s) to the PrimeNg p-dataTable

[Srini86]

I have a problem with adding new row(s) to the existing p-dataTable. How to add new rows to the PrimeNg dataTable?.

Scenario is like:
I have a p-data-table with some rows and columns with in the columns we have links like a-4, b-0,c-5 as a content. After clicking on the appropriate link of appropriate row based on the number that has a link( ex: a has 4 values 4 rows need to create dynamically) that many row(s) need to be created exactly under/along with this parent row.

Thanks in advance.

[sudheer]

Instead of adding at the end you should add it under specific row. The component logic changes(where to insert) compared to the below example. Where you are facing the issue

https://www.primefaces.org/primeng/#/datatable/crud

[fixkimjouha]

I've spent almost a week on this and surprisingly I didn't find any satisfactory answers. It seems that if the reference of your object doesn't changes, the component doesn't reloads. What I've found so far on the crud example is that It uses

Code: Select all

this.array.push(something);
this.array = {...this.array};

to assign the array to itself so that the html understands it`s a new table, but it didn't work for me.
What worked was doing something like this:

Code: Select all

var otherArray = this.dataTable.concat([newRow]);
this.dataTable = otherArray;

Basically, create an another array, populate it and assign it to the table.
Unfortunately, push() doesn't work also.

[PhilHuhn]

Hey:
Angular change management does not get invoked with a push command. It requires a reassignment of the value. So the spread operator is one solution as follows:

Code: Select all

this.array = [ ...this.array, something ];

Note that the above uses the array [], not the class {}. The class spread operator can be used in cloning a class.

p-dataTable was discontinued a long time ago. I personally started with p-dataTable and had to convert when it was gone. The following contrasts the two implementation:

Code: Select all

<p-dataTable id='notetypes-grid' [value]='notetypes' [totalRecords]='totalRecords'
    expandableRows='true' [stacked]='stacked'
    [rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'
    [responsive]='true'>
  <p-column expander='true' styleClass='col-icon' [style]="{'width':'40px'}"></p-column>
  <p-column [style]="{'width':'40px'}">
    <ng-template pTemplate='header'>
      <button (click)="addItemClicked( )" pButton type="button" icon="fa fa-plus" class="ui-button-primary"></button>
    </ng-template>
    <ng-template pTemplate='body' let-notetypes='rowData'>
      <button (click)="editItemClicked( notetypes )" pButton type="button" icon="fa fa-edit" class="ui-button-primary"></button>
    </ng-template>
  </p-column>
  <p-column header='Note Type Id' field='NoteTypeId'
    [sortable]='true'
    [style]="{'width':'80px'}">
  </p-column>
  <p-column header='Note Type Desc' field='NoteTypeDesc'
    [sortable]='true'
    [style]="{'width':'250px'}">
  </p-column>
  <p-column header='Note Type Short Desc' field='NoteTypeShortDesc'
    [sortable]='true'
    [style]="{'width':'82px'}">
  </p-column>
  <p-column header='' [style]="{'width':'40px'}">
    <ng-template pTemplate='header'></ng-template>
    <ng-template pTemplate='body' let-notetype='rowData'>
      <button (click)="deleteItemClicked( notetype )" pButton type="button" icon="fa fa-trash" class="ui-button-danger"></button>
    </ng-template>
  </p-column>
  <ng-template let-notetype pTemplate='rowexpansion'>
    <div class='ui-grid ui-grid-responsive ui-fluid'>
      <div class='ui-grid-row ui-inputgroup'>
        <div class='ui-grid-col-3 nsg-primary-color nsg-text-right'><label for='NoteTypeId'>Note Type Id:&nbsp;</label></div>
        <div class='ui-grid-col-9' id='NoteTypeId'>{{notetype.NoteTypeId}}</div>
      </div>
      <div class='ui-grid-row ui-inputgroup'>
        <div class='ui-grid-col-3 nsg-primary-color nsg-text-right'><label for='NoteTypeDesc'>Note Type Desc:&nbsp;</label></div>
        <div class='ui-grid-col-9' id='NoteTypeDesc'>{{notetype.NoteTypeDesc}}</div>
      </div>
      <div class='ui-grid-row ui-inputgroup'>
        <div class='ui-grid-col-3 nsg-primary-color nsg-text-right'><label for='NoteTypeShortDesc'>Note Type Short Desc:&nbsp;</label></div>
        <div class='ui-grid-col-9' id='NoteTypeShortDesc'>{{notetype.NoteTypeShortDesc}}</div>
      </div>
    </div>
  </ng-template>
</p-dataTable>

Code: Select all

<p-table id='notetypes-grid' [value]='notetypes' [responsive]='true'
    [totalRecords]='totalRecords' dataKey='NoteTypeId'
    [rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'>
  <ng-template pTemplate='header'>
    <tr>
      <th style='width: 45px;'></th>
      <th style='width: 65px;'>
        <button (click)='addItemClicked( )' pButton type='button' icon='pi pi-plus' class='p-button-primary' [disabled]='!editable'></button>
      </th>
      <th style='width: 80px;' [pSortableColumn]='"NoteTypeId"'>
        Note Type Id
        <p-sortIcon [field]='"NoteTypeId"'></p-sortIcon>
      </th>
      <th style='width: 250px;' [pSortableColumn]='"NoteTypeDesc"'>
        Note Type Desc
        <p-sortIcon [field]='"NoteTypeDesc"'></p-sortIcon>
      </th>
      <th style='width: 82px;' [pSortableColumn]='"NoteTypeShortDesc"'>
        Note Type Short Desc
        <p-sortIcon [field]='"NoteTypeShortDesc"'></p-sortIcon>
      </th>
      <th style='width: 65px;'></th>
    </tr>
  </ng-template>
  <ng-template pTemplate='body' let-rowData let-columns='columns' let-expanded='expanded'>
    <tr>
      <td>
        <a href='#' [pRowToggler]='rowData'>
          <i [ngClass]='expanded ? "pi pi-fw pi-chevron-circle-down" : "pi pi-pw pi-chevron-circle-right"' style='font-size: 1.25em'></i>
        </a>
      </td>
      <td>
        <button (click)='editItemClicked( rowData )' pButton type='button' icon='pi pi-pencil' class='p-button-primary'></button>
      </td>
      <td>
        <span class='p-column-title'>Note Type Id</span>
        {{rowData.NoteTypeId}}
      </td>
      <td>
        <span class='p-column-title'>Note Type Desc</span>
        {{rowData.NoteTypeDesc}}
      </td>
      <td>
        <span class='p-column-title'>Note Type Short Desc</span>
        {{rowData.NoteTypeShortDesc}}
      </td>
      <td>
        <button (click)='deleteItemClicked( rowData )' pButton type='button' icon='pi pi-trash' class='p-button-danger' [disabled]='!editable'></button>
      </td>
    </tr>
  </ng-template>
  <ng-template let-notetype pTemplate='rowexpansion'>
    <tr><td [attr.colspan]='6'>
      <div>
          <div class='row'>
            <div class='col-lg-2 col-md-3 col-sm-12 nsg-primary-color nsg-text-right'><label for='NoteTypeId'>Note Type Id:&nbsp;</label></div>
            <div class='col-lg-auto col-md-auto col-sm-12' id='NoteTypeId'>{{notetype.NoteTypeId}}</div>
          </div>
          <div class='row'>
            <div class='col-lg-2 col-md-3 col-sm-12 nsg-primary-color nsg-text-right'><label for='NoteTypeDesc'>Note Type Desc:&nbsp;</label></div>
            <div class='col-lg-auto col-md-auto col-sm-12' id='NoteTypeDesc'>{{notetype.NoteTypeDesc}}</div>
          </div>
          <div class='row'>
            <div class='col-lg-2 col-md-3 col-sm-12 nsg-primary-color nsg-text-right'><label for='NoteTypeShortDesc'>Note Type Short Desc:&nbsp;</label></div>
            <div class='col-lg-auto col-md-auto col-sm-12' id='NoteTypeShortDesc'>{{notetype.NoteTypeShortDesc}}</div>
          </div>
      </div>
    </td><tr>
  </ng-template>
</p-table>