PrimeNg DataTable Row Group using the primeng code and creating a function to add objects to my data array. But when adding new data is not displayed. But if it is shown in the sum of the data, i.e. the data is not shown but the records are counted.

HTML

<button (click)="agregar()">add</button>

<p-table class="gobal-group-table" [value]="datos" [scrollable]="true" scrollHeight="800px"
    sortField="representative.name" sortMode="single" dataKey="representative.name" rowGroupMode="subheader"
    groupRowsBy="representative.name" responsiveLayout="scroll">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Image</th>
            <th>Price</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="groupheader" let-customer let-rowIndex="rowIndex" let-expanded="expanded">
        <tr>
            <td colspan="3">
                <button type="button" pButton pRipple [pRowToggler]="customer"
                    class="p-button-text p-button-rounded p-button-plain p-mr-2"
                    [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
                <span class="p-text-bold p-ml-2">{{customer.representative.name}}</span>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="groupfooter" let-customer>
        <tr class="p-rowgroup-footer">
            <td colspan="2" style="text-align: right">Total Customers</td>
            <td>{{calculateCustomerTotal(customer.representative.name)}}</td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-customer>
        <tr>
            <td>{{customer?.representative.name}}</td>
            <td>{{customer?.name}}</td>
            <td>{{customer?.name}}</td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
        <div class="p-d-flex p-ai-center p-jc-between">
            In total there are {{datos ? datos.length : 0 }} Customers.
        </div>
    </ng-template>
</p-table>

TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-global-group-table',
  templateUrl: './global-group-table.component.html',
  styleUrls: ['./global-group-table.component.scss']
})
export class GlobalGroupTableComponent implements OnInit {

  datos: any = [
    {
      "id": 1047,
      "name": "Kanisha Waycott",
      "country": {
        "name": "Ecuador",
        "code": "ec"
      },
      "company": "Schroer, Gene E Esq",
      "date": "2019-11-27",
      "status": "new",
      "verified": false,
      "activity": 80,
      "representative": {
        "name": "Xuxue Feng",
        "image": "xuxuefeng.png"
      },
      "balance": 9920
    },
    {
      "id": 1048,
      "name": "Emerson Bowley",
      "country": {
        "name": "Finland",
        "code": "fi"
      },
      "company": "Knights Inn",
      "date": "2018-11-24",
      "status": "new",
      "verified": false,
      "activity": 63,
      "representative": {
        "name": "Stephen Shaw",
        "image": "stephenshaw.png"
      },
      "balance": 78069
    },
    {
      "id": 1049,
      "name": "Blair Malet",
      "country": {
        "name": "Finland",
        "code": "fi"
      },
      "company": "Bollinger Mach Shp & Shipyard",
      "date": "2018-04-19",
      "status": "new",
      "verified": true,
      "activity": 92,
      "representative": {
        "name": "Asiya Javayant",
        "image": "asiyajavayant.png"
      },
      "balance": 65005
    }
  ];

  constructor() { }

  ngOnInit() {
  }

  agregar() {
    this.datos.push({
      "id": 10492,
      "name": "Blair",
      "country": {
        "name": "Finland",
        "code": "fi"
      },
      "company": "Bollinger Mach Shp & Shipyard",
      "date": "2018-04-19",
      "status": "new",
      "verified": true,
      "activity": 92,
      "representative": {
        "name": "Asiya Javayant",
        "image": "asiyajavayant.png"
      },
      "balance": 65005
    })
  }

  calculateCustomerTotal(name: any) {
    let total = 0;

    if (this.datos) {
      for (let customer of this.datos) {
        if (customer.representative.name === name) {
          total  ;
        }
      }
    }

    return total;
  }

}

This is the normal table:

Normal Table

This is the table after adding more data to it:

Table with new data

CodePudding user response：

I have just explained a little more about this idea to see if it helps you:

HTML, just change this:

<div *ngIf="datos$ as datos">
<p-table 
   class="gobal-group-table" 
   [value]="datos | async"
   [scrollable]="true" 
   scrollHeight="800px"
   sortField="representative.name" 
   sortMode="single" 
   dataKey="representative.name" 
   rowGroupMode="subheader"
   groupRowsBy="representative.name"
   responsiveLayout="scroll"
>
...
</p-table>
</div>

TS:

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, Observable, of } from 'rxjs';


@Component({
  selector: 'app-global-group-table',
  templateUrl: './global-group-table.component.html',
  styleUrls: ['./global-group-table.component.scss']
})
export class GlobalGroupTableComponent implements OnInit {

    datos$: obserbable<any[]>; 
    datosSource: BehaviorSubject<any[] | null>(null);
    datosSubject$ = this.datosSource.asObservable();

    constructor() {

        const _initDatos = [
            {
              "id": 1047,
              "name": "Kanisha Waycott",
              "country": {
                "name": "Ecuador",
                "code": "ec"
              },
              "company": "Schroer, Gene E Esq",
              "date": "2019-11-27",
              "status": "new",
              "verified": false,
              "activity": 80,
              "representative": {
                "name": "Xuxue Feng",
                "image": "xuxuefeng.png"
              },
              "balance": 9920
            },
            {
              "id": 1048,
              "name": "Emerson Bowley",
              "country": {
                "name": "Finland",
                "code": "fi"
              },
              "company": "Knights Inn",
              "date": "2018-11-24",
              "status": "new",
              "verified": false,
              "activity": 63,
              "representative": {
                "name": "Stephen Shaw",
                "image": "stephenshaw.png"
              },
              "balance": 78069
            },
            {
              "id": 1049,
              "name": "Blair Malet",
              "country": {
                "name": "Finland",
                "code": "fi"
              },
              "company": "Bollinger Mach Shp & Shipyard",
              "date": "2018-04-19",
              "status": "new",
              "verified": true,
              "activity": 92,
              "representative": {
                "name": "Asiya Javayant",
                "image": "asiyajavayant.png"
              },
              "balance": 65005
            }
        ];

        datos$
           .subscribe( (_datos:any[]) => {
              if ( _datos && _datos?.length > 0) {          
                 this.setDatosSubject(_datos);
              }
           });
           
         this.setDatosSubject(_initDatos);
       
    }

    ngOnInit() {}
     
    agregar() {

        let currentDatos = this.getDatosSubject();

        currentDatos.push({
          "id": 10492,
          "name": "Blair",
          "country": {
            "name": "Finland",
            "code": "fi"
          },
          "company": "Bollinger Mach Shp & Shipyard",
          "date": "2018-04-19",
          "status": "new",
          "verified": true,
          "activity": 92,
          "representative": {
            "name": "Asiya Javayant",
            "image": "asiyajavayant.png"
          },
          "balance": 65005
        });
        
        this.setDatosSubject(currentDatos);
        
    }

    calculateCustomerTotal(name: any) {
        let total = 0;

        if (this.datos) {
          for (let customer of this.datos) {
            if (customer.representative.name === name) {
              total  ;
            }
          }
        }

        return total;
    }



     

    setDatosSubject(datos: any[]) {
        this.datosSubject.next(datos);
    }

    getDatosSubject() {
        return this.datosSubject.value;
    }

}




}