<div class="table-columns">
  <div class="scroll-buffer">
    <table class="table">
      {{#if table.caption}}
        {{table-caption caption=table.caption alignment=table.captionAlignment hideFromView=table.hideCaption}}
      {{/if}}
      <thead>
        <tr>
          {{#each columns as |column|}}
            {{component column.headerComponent
              table=table
              column=column
              class=column.headerClassNames
              onColumnWidthChange=(action 'columnWidthChanged')}}
          {{/each}}
        </tr>
      </thead>

      {{#if table.collapsable}}
        {{#collapsable-table-rows
          content=table.collapseTableData
          hideOffscreenContent=table.hideOffscreenContent
          rowHeight=rowHeight
          table=table
          itemClassNames=(concat 'table-row ' mergedRowClasses)
          as |row|}}

          {{#if row.label}}
            <td colspan={{columns.length}} class="table-cell">
              {{row.label}}
            </td>
          {{else if (or row.isParent (not row.parent.IsCollapsed))}}
            {{yield row}}
          {{/if}}
        {{/collapsable-table-rows}}
      {{else}}
        {{#table-rows
          content=table.content
          hideOffscreenContent=table.hideOffscreenContent
          rowHeight=rowHeight
          table=table
          itemClassNames=(concat 'table-row ' mergedRowClasses)
          as |row|}}

          {{yield row}}
        {{/table-rows}}
      {{/if}}
    </table>
  </div>
</div>
