D-Net

<p-table [value]="_journalEntries?.slice(first, first+rows)"

         [lazy]="true"

         (onLazyLoad)="onPagination($event)"

         [paginator]="true"

         [rows]="rows"

         [totalRecords]="journalEntries?.length"

         styleClass="p-datatable-gridlines"

         [rowHover]="true"

         [loading]="loading"

         [autoLayout]="true">

  <ng-template pTemplate="header">

    <tr>

      <th>Document No.</th>

      <th>Account Type</th>

      <th>Account No.</th>

      <th>Description</th>

      <th>Amount</th>

      <th>Currency ID</th>

      <th>VatBusiness</th>

      <th>Status</th>

      <!-- TODO: Fix hacky way of locking the icon-columns in place -->

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

    </tr>

  </ng-template>

  <ng-template pTemplate="body" let-rowIndex="rowIndex" let-entry>

    <tr>

      <td>{{entry.documentNo}}</td>

      <td>{{entry.accountType}}</td>

      <td>{{entry.accountNo}}</td>

      <td>{{entry.description}}</td>

      <td>{{entry.amount}}</td>

      <td>{{entry.currencyCode}}</td>

      <td>{{entry.vatBusPostingGroup}}</td>

      <td>{{entry.journalEntriesStatus.name}}</td>

      <!-- Preview, Edit & Post Icons -->

      <td>

        <button pButton

                (click)="previewJournalEntry(entry, rowIndex)"

                icon="pi pi-list"

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

        </button>

        <button *ngIf="buttonHoldingEntriesIDsArray?.includes(entry.id)"

                pButton

                (click)="editJournalEntry(entry)"

                icon="pi pi-pencil"

                class="p-button-secondary p-button-rounded p-button-outlined p-ml-2">

        </button>

        <button *ngIf="buttonHoldingEntriesIDsArray?.includes(entry.id)"

                pButton

                (click)="viewJournalEntry(entry)"

                icon="pi pi-eye"

                class="p-button-secondary p-button-rounded p-button-outlined p-ml-2">

        </button>

        <button *ngIf="buttonHoldingEntriesIDsArray?.includes(entry.id)"

                pButton

                (click)="postJournalEntry(entry)"

                icon="pi pi-external-link"

                class="p-button-secondary p-button-rounded p-button-outlined p-ml-2">

        </button>

      </td>

    </tr>

  </ng-template>

</p-table>