<div class="ui-table" local-class="ui-table {{this.heightClass}}">
  <table local-class="table" ...attributes>
    {{#if this.hasColumns}}
      <UiTableHead
        @hasFixedHeader={{this.hasFixedHeader}}
        as |Head|
      >
        <Head.Row
          @isSelected={{this.isAllSelected}}
          @onSelect={{this.onSelectAll}}
          @onDeselect={{this.onDeselectAll}}
        as |Row|>
          {{#each this.columns as |column|}}
            <Row.Cell
              class={{column.classes}}
              @key={{column.key}}
              @isSortable={{column.isSortable}}
              @sortBy={{this.sortBy}}
              @sortOrder={{this.sortOrder}}
              @onSort={{this.onSort}}
            >
              {{column.label}}
            </Row.Cell>
          {{/each}}
        </Head.Row>
      </UiTableHead>
    {{/if}}
    {{yield
      (hash
        Head=(component "ui-table-head"
          isLoading=this.isLoading
          onSort=this.onSort
          hasFixedHeader=this.hasFixedHeader
        )
        Body=(component "ui-table-body"
          isLoading=this.isLoading
        )
      )
    }}
  </table>
</div>