dynamic-table.component.html

<p-table
  [value]="loading() ? [] : data()"
  [paginator]="paginator() && !loading()"
  [totalRecords]="totalRecords()"
  [scrollable]="true"
  [first]="page() * rows()"
  [rows]="rows()"
  [rowsPerPageOptions]="rowsPerPageOptions()"
  [lazy]="lazy()"
  [lazyLoadOnInit]="false"
  (onLazyLoad)="emitLazy($event)"
  [tableStyle]="{ width: '100%' }"
>
  <!-- Header -->
  <ng-template pTemplate="header">
    @if (!hideHeader()) {
      <tr>
        @if (selectable()) {
          <th class="selection-col">
            <p-tableHeaderCheckbox />
          </th>
        }
        @for (col of columns(); track col.field) {
          <th [style.width]="col.width" jhiTranslate="{{ col.header }}"></th>
        }
      </tr>
    }
  </ng-template>

  <!-- Body -->
  <ng-template let-rowData pTemplate="body">
    <tr>
      @if (selectable()) {
        <td>
          <p-tableCheckbox [value]="rowData" />
        </td>
      }
      @for (col of columns(); track col.field) {
        <td [style.width]="col.width" [ngClass]="{ 'text-center': col.alignCenter ?? false }">
          @if (col.template) {
            <ng-container *ngTemplateOutlet="col.template; context: { $implicit: rowData }" />
          } @else if (col.type === 'date') {
            {{ rowData[col.field] | date: 'dd.MM.yyyy' }}
          } @else {
            {{ rowData[col.field] }}
          }
        </td>
      }
    </tr>
  </ng-template>

  <!-- Empty message while loading -->
  <ng-template pTemplate="emptymessage">
    @if (loading()) {
      <td [attr.colspan]="columns().length + (selectable() ? 1 : 0)">
        <div class="flex items-center justify-center py-8">
          <jhi-progress-spinner [classStyling]="'w-12 h-12'" [strokeWidth]="'4'" />
        </div>
      </td>
    }
  </ng-template>
</p-table>