psp_panel/src/app/shared/components/pageDataList/page-data-list-table-view.component.html

<div class="h-full flex flex-col gap-4">
  <p-table
    [columns]="columns"
    [scrollable]="true"
    [value]="items"
    [loading]="loading"
    columnResizeMode="fit"
    stripedRows
    [showFirstLastIcon]="false"
    [expandedRowKeys]="expandedRows"
    [dataKey]="dataKey"
    class="max-sm:hidden! grow flex! flex-col overflow-hidden"
    [tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
  >
    @if (captionBox) {
      <ng-template #caption>
        <ng-container [ngTemplateOutlet]="captionBox"> </ng-container>
      </ng-template>
    }

    <ng-template #header let-columns>
      <tr>
        @if (showIndex) {
          <th [style]="{ width: '3rem', minWidth: '3rem' }"></th>
        }
        @for (col of columns; track col.header) {
          <th
            [style]="
              col.type === 'index' ? { width: '3rem', minWidth: '3rem' } : { width: col.width, minWidth: col.minWidth }
            "
          >
            {{ col.header }}
          </th>
        }
        @if (actionsCount()) {
          <th type="th" [style]="{ width: `${actionsCount() * 2 + (actionsCount() - 1) * 0.25}rem` }"></th>
        }
        @if (expandable) {
          <th style="width: 3rem"></th>
        }
      </tr>
    </ng-template>

    <ng-template #body let-item let-i="rowIndex" let-expanded="expanded">
      <tr>
        @if (showIndex) {
          <td>
            {{ i * (currentPage || 1) + 1 }}
          </td>
        }
        @for (col of columns; track col.field) {
          <td>
            @if (col.type === "thumbnail") {
              <div
                class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-50 cursor-pointer"
                (click)="openThumbnailModal(item)"
              >
                @if (item[col.field]) {
                  <img [src]="item[col.field]" class="w-full h-full object-cover" />
                }
              </div>
            } @else if (col.variant === "tag") {
              <p-tag [value]="getCell(item, col)" [severity]="col.tagOptions?.severity || 'contrast'"></p-tag>
            } @else if (getTemplate(col)) {
              <ng-container
                [ngTemplateOutlet]="getTemplate(col)"
                [ngTemplateOutletContext]="{ $implicit: item }"
              ></ng-container>
            } @else if (col.canCopy) {
              <uikit-copy [text]="getCell(item, col)"></uikit-copy>
            } @else {
              <span [class]="getPreviewClasses(item, col)">
                {{ getCell(item, col) }}
              </span>
            }
          </td>
        }
        @if (actionsCount()) {
          <td
            table-action-row
            type="td"
            [showDetails]="showDetails"
            [showDelete]="showDelete"
            [showEdit]="showEdit"
            (edit)="edit(item)"
            (delete)="remove(item)"
            (details)="details(item)"
          ></td>
        }

        @if (expandable) {
          <td>
            <p-button
              type="button"
              pRipple
              [pRowToggler]="item"
              [text]="true"
              [rounded]="true"
              [plain]="true"
              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
            />
          </td>
        }
      </tr>
    </ng-template>

    @if (expandable && expandColumns && expandableItemKey) {
      <ng-template #expandedrow let-item>
        <tr>
          <td [attr.colspan]="columns.length + 1">
            <div class="px-4">
              @if (item[expandableItemKey]?.length) {
                <p-table
                  [columns]="expandColumns || []"
                  [scrollable]="true"
                  [value]="item[expandableItemKey]"
                  [loading]="loading"
                  columnResizeMode="fit"
                  stripedRows
                  [showFirstLastIcon]="false"
                  [expandedRowKeys]="expandedRows"
                  class="grow flex! flex-col overflow-hidden"
                  [tableStyleClass]="!item.items?.length && !loading ? 'h-full' : ''"
                >
                  <ng-template #header let-columns>
                    <tr>
                      @for (col of expandColumns; track col.header) {
                        <th
                          [style]="
                            col.type === 'index'
                              ? { width: '3rem', minWidth: '3rem' }
                              : { width: col.width, minWidth: col.minWidth }
                          "
                        >
                          {{ col.header }}
                        </th>
                      }
                    </tr>
                  </ng-template>

                  <ng-template #body let-item let-i="rowIndex">
                    <tr>
                      @for (col of expandColumns; track col.field) {
                        <td>
                          {{ item.name }}
                          @if (col.type === "index") {
                            {{ i * (currentPage || 1) + 1 }}
                          } @else if (col.type === "thumbnail") {
                            <div
                              class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-50 cursor-pointer"
                              (click)="openThumbnailModal(item)"
                            >
                              @if (item[col.field]) {
                                <img [src]="item[col.field]" class="w-full h-full object-cover" />
                              }
                            </div>
                          } @else if (getTemplate(col)) {
                            <ng-container
                              [ngTemplateOutlet]="getTemplate(col)"
                              [ngTemplateOutletContext]="{ $implicit: item }"
                            ></ng-container>
                          } @else if (col.canCopy) {
                            <uikit-copy [text]="getCell(item, col)"></uikit-copy>
                          } @else {
                            <span [class]="getPreviewClasses(item, col)">
                              {{ getCell(item, col) }}
                            </span>
                          }
                        </td>
                      }
                    </tr>
                  </ng-template>

                  <ng-template #emptymessage>
                    <tr class="">
                      <td [colSpan]="(expandColumns.length + 1).toString()" class="w-full">
                        <uikit-empty-state
                          [title]="emptyPlaceholderTitle"
                          [description]="emptyPlaceholderDescription"
                          [ctaLabel]="emptyPlaceholderCtaLabel || addNewCtaLabel"
                          [showCTA]="showAdd"
                          (ctaClick)="openAddForm()"
                        ></uikit-empty-state>
                      </td>
                    </tr>
                  </ng-template>
                </p-table>
              } @else {
                <div class="grid grid-cols-3 gap-4 py-2">
                  @for (col of expandColumns; track $index) {
                    <app-key-value
                      [label]="col.header"
                      [value]="item[expandableItemKey][col.field]"
                      [type]="col.type || 'simple'"
                      [variant]="col.variant"
                    />
                  }
                </div>
              }
            </div>
          </td>
        </tr>
      </ng-template>
    }

    <ng-template #emptymessage>
      <tr class="">
        <td [colSpan]="(columns.length + 1).toString()" class="w-full">
          <ng-container [ngTemplateOutlet]="emptyMessageCard"></ng-container>
        </td>
      </tr>
    </ng-template>

    <ng-template #loadingbody let-columns>
      @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track i) {
        <tr style="height: 46px">
          @if (showIndex) {
            <td>
              <p-skeleton></p-skeleton>
            </td>
          }
          @for (col of columns; track col) {
            <td>
              <p-skeleton></p-skeleton>
            </td>
          }
          @if (actionsCount()) {
            <td>
              <p-skeleton></p-skeleton>
            </td>
          }
        </tr>
      }
    </ng-template>
  </p-table>

  @if (showPaginator) {
    <ng-container [ngTemplateOutlet]="paginator"> </ng-container>
  }
</div>