<table class="{{tableClass()}}">
  @if(headercaption()){
  <caption [class]="captionheaderclass()">{{captionheaderContent()}}</caption>
  }
  <thead class="{{tableHead()}}">
    <tr [class]="trHeadClass()">
      @if(showCheckbox()){
      <th class="{{checkboxClass()}}">
        <input class="form-check-input" type="checkbox" [checked]="allTasksChecked" (change)="onToggleSelectAll($event)"
          aria-label="Select all" />
          @if(CheckboxText()){

            {{CheckboxText()}}
          }
      </th>
      }
      @for(column of columns(); track $index){
      <th [class]="column.tableHeadColumn">{{ column.header }}</th>
      }
    </tr>
  </thead>

  <tbody class="{{tableBody()}}">
    <ng-content />
  </tbody>

  @if(showFooter()){
  <tfoot class="{{tableFooter()}}">
    @if(footerData()){
    @for(column of footerData(); track $index){
    <th>{{ column }}</th>
    }
    }
    <ng-content select="[footer]" />
  </tfoot>
  }
  @if(footercaption()){
  <caption [class]="captionfooterclass()">{{captionfooterContent()}}</caption>
  }
</table>
