@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">
        <span>
          Showing {{ (data.page.page - 1) * data.page.size + 1 }} to
          {{ data.page.page * data.page.size }} of {{ data.total }}
        </span>
        <span> </span>
      </td>
    </tr>
  </tfoot>
  }
</table>
}