{{#if this.isHead}}
  {{! template-lint-disable no-invalid-interactive }}
  <th
    role={{if @sortable 'button'}}
    {{! DOTO: align is depricated, use styles align instead }}
    align={{@align}}
    ...attributes
    {{on 'click' this.handleClickHead}}
    {{on 'click' this.handleSort}}
  >
    <span class='inline-flex items-center'>
      {{#if (has-block 'head')}}
        {{yield to='head'}}
      {{else if @headComponent}}
        <@headComponent @data={{@data}} />
      {{else if @name}}
        {{@name}}
      {{else if @prop}}
        {{@prop}}
      {{/if}}

      {{#if @sortable}}
        {{#let 'fill-base-3 ml-0.5' 14 as |class size|}}
          {{#if this.isAscSorted}}
            <Icons::ArrowDownThin class={{class}} @size={{size}} />
          {{else if this.isDescSorted}}
            <Icons::ArrowUpThin class={{class}} @size={{size}} />
          {{else}}
            <Icons::ArrowUpDown class={{class}} @size={{size}} />
          {{/if}}
        {{/let}}
      {{/if}}
    </span>
  </th>
{{else if this.isBody}}
  <td align={{@align}} ...attributes>
    {{#if (has-block)}}
      {{yield}}
    {{else if @bodyComponent}}
      <@bodyComponent @data={{@data}} />
    {{else}}
      {{get @data @prop}}
    {{/if}}
  </td>
{{/if}}