D-Net

<p-table [value]="unhandledDataList"

         [autoLayout]="true"

         styleClass="p-datatable-gridlines"

         [rowHover]="true">

  <ng-template pTemplate="header">

    <tr>

      <th>Invoice Number</th>

      <th>Invoice Type</th>

      <th>Invoice IssueDate</th>

      <th>Client Name</th>

      <th>Supplier Name</th>

      <th>Total Price</th>

      <th>Vat Rate</th>

      <th>total Amount</th>

      <th class="two-buttons"></th>

    </tr>

  </ng-template>

  <ng-template pTemplate="body"

               let-unhandledData>

    <tr>

      <td>{{unhandledData?.record.invoiceMasterData.invoiceNumber}}</td>

      <td>{{unhandledData?.record.invoiceMasterData.invoiceType}}</td>

      <td>{{unhandledData?.record.invoiceMasterData.invoiceIssueDate}}</td>

      <td>{{unhandledData?.record.invoiceMasterData.customerName}}</td>

      <td>{{unhandledData?.record.invoiceMasterData.supplierName}}</td>

      <td>{{unhandledData?.record.invoiceMasterData.totalPriceBeforeVat}}</td>

      <td>{{unhandledData?.record.invoiceMasterData.vatRate}}</td>

      <td>{{unhandledData?.record.invoiceMasterData.totalAmount}}</td>

      <!-- Preview Icon -->

      <td>

        <p-button (click)="preview(unhandledData)"

                  icon="pi pi-file-o"

                  styleClass="p-mr-2 p-button-secondary p-button-rounded p-button-outlined">

        </p-button>

        <p-button (click)="reclassification(unhandledData)"

                  icon="pi pi-chart-bar"

                  styleClass="p-button-secondary p-button-rounded p-button-outlined">

        </p-button>

      </td>

    </tr>

  </ng-template>

</p-table>