PrimeNG Table

primeng_table.txt

https://github.com/MiracleAdvanceTechnologies/PetMatrixFrontend/commit/c9ced1c8611b15562e95b8271ababe824ea72e27

<p-table #table [value]="[{}]">
        <ng-template pTemplate="header">
            <tr>
                <th>Reporting</th>
                <th>Con. Simple</th>
                <th>Con. Complex</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData>
            <!-- <tr>
                <td style="text-align: right;">THB {{textDataModel.REPORTING | number:'2.0'}}</td>
                <td style="text-align: right;">THB {{textDataModel.SIMPLE | number : '1.0-2'}}</td>
                <td style="text-align: right;">THB {{textDataModel.COMPLEX | number : '1.0-2'}}</td>
            </tr> -->
        </ng-template>
    </p-table>


<div class="ui-g">
  <div class="ui-g-12 ui-md-12">
    <div class="payment-report-table">
      <p-table [value]="paymentReportItem">
        <ng-template pTemplate="header">
          <tr style="text-align: left">
            <th>Client Name</th>
            <th>Visit No</th>
            <th>Invoice No</th>
            <th>Payment Data</th>
            <th>Payable Amount</th>
            <th>Paid Amount</th>
          </tr>
        </ng-template>

        <ng-template pTemplate="body" let-item>
          <tr>
            <td>{{item.clientName}}</td>
            <td>{{item.visitNo}}</td>
            <td>{{item.invoiceNo}}</td>
            <td>{{item.paymentDate}}</td>
            <td>{{item.payableAmount}}</td>
            <td>{{item.paidAmount}}</td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  </div>
</div>

  ## 
    <td *ngFor="let col of columns">
                <span *ngIf="col.header == 'Payable Amount' || col.header == 'Paid Amount'" style="text-align: right;display: block;">{{rowData[col.field] | number: '1.2' }}</span>
                <!-- <span *ngIf="col.header == 'Paid Amount'">{{rowData[col.field] | number: '1.2'}}</span> -->
                <!-- <span *ngIf="col.header == 'Payable Amount'">{{rowData[col.field]}} | number: '1.2'</span> -->
                <span *ngIf="col.header != 'Payable Amount' && col.header != 'Paid Amount'" >{{ rowData[col.field] }}</span>
              </td>

primeng_table_value.txt

 paymentReportItem: any[];

    this.paymentReportItem = [
      {clientName: "John Doe",visitNo: "01",invoiceNo: "01",paymentDate: "10-11-2018", payableAmount: "100", paidAmount: "120"},
      {clientName: "Mike Hussy",visitNo: "02",invoiceNo: "02",paymentDate: "10-11-2018", payableAmount: "100", paidAmount: "140"},
      {clientName: "Micle Clark",visitNo: "03",invoiceNo: "03",paymentDate: "10-11-2018", payableAmount: "100", paidAmount: "160"},
      {clientName: "Jony Bro",visitNo: "04",invoiceNo: "04",paymentDate: "10-11-2018", payableAmount: "100", paidAmount: "170"},
    ];