@if (data.headers.length > 0) {
<table>
  <thead>
    <tr>
      <th class="spacer"></th>
      @for (h of data.headers; track h) {
      <th [title]="h.label">
        {{ h.label }}
        <span
          class="clickable"
          [class.button]="h.sort !== SORT.NONE"
          [class.unused]="h.sort === SORT.NONE"
          (click)="onSort($event, h)"
        >
          @switch (h.sort) { @case (SORT.ASC) {
          <fa-icon [icon]="faSortUp"></fa-icon>
          } @case(SORT.DSC) {
          <fa-icon [icon]="faSortDown"></fa-icon>
          } @default {
          <fa-icon [icon]="faSort"></fa-icon>
          } }
        </span>
      </th>
      }
    </tr>
  </thead>
  <tbody>
    @for (row of data.data; track row; let i = $index) {
    <tr>
      <td>
        @if (data.page) {
        {{ (data.page.page - 1) * data.page.size + i + 1 }}
        } @else {
        {{ i + 1 }}
        }
      </td>
      @for (h of data.headers; track h) {
      <td>
        {{ row[h.source] }}
      </td>
      }
    </tr>
    }
  </tbody>
  @if (data.page) {
  <tfoot>
    <tr>
      <td [attr.colspan]="data.headers.length + 1">
        <div class="left">
          @for (btn of pagesize; track btn) {
          <input
            role="button"
            type="submit"
            (click)="onPageSize($event, btn.page)"
            [class.clickable]="!btn.current"
            [class.current]="btn.current"
            [attr.value]="btn.page"
          />
          }
        </div>
        <span class="center">
          {{ (data.page.page - 1) * data.page.size + 1 }}-{{
            Math.min(data.page.page * data.page.size, data.total)
          }}
          of {{ data.total }}
        </span>
        <div class="right">
          @for (btn of pager; track page) { @if (btn.ellipsis) {
          <span>...</span>
          } @else {
          <input
            role="button"
            type="submit"
            (click)="onPage($event, btn.page)"
            [class.clickable]="!btn.current"
            [class.current]="btn.current"
            [attr.value]="btn.page"
          />} }
        </div>
      </td>
    </tr>
  </tfoot>
  }
</table>
}
