<table class="table">
  <thead>
    <tr>
      {{#each columns as |column|}}
        {{component column.headerComponent
          table=table
          column=column
          classNames=column.headerClassNames
          onColumnWidthChange=(action 'columnWidthChanged')}}
      {{/each}}
    </tr>
  </thead>

  <tbody>
    {{! TODO: render diff template instead of this if }}
    {{#if table.collapsable}}
      {{#each table.content as |rowGroup|}}
        <tr class="table-row {{mergedRowClasses}} collapsable {{if (eq rowGroup.isCollapsed false) 'is-expanded' 'is-collapsed'}} {{if rowGroup.loading 'is-loading'}}" {{action 'toggleRowCollapse' rowGroup}}>

          {{#if rowGroup.label}}
            <td colspan={{columns.length}} class="table-cell">
              {{rowGroup.label}}
            </td>
          {{else}}
            {{yield rowGroup}}
          {{/if}}
        </tr>
        {{#each (get rowGroup rowGroupDataName) as |childRow|}}
          <tr class="table-row {{if rowGroup.isCollapsed 'is-collapsed'}}">
            {{yield childRow}}
          </tr>
        {{else}}
          <tr class="is-collapsed">
            {{yield}}
          </tr>
        {{/each}}
      {{/each}}
    {{else}}
      {{#each table.content as |row|}}
        <tr class="table-row {{mergedRowClasses}}" style={{rowHeight}}>
          {{yield row}}
        </tr>
      {{/each}}
    {{/if}}
  </tbody>
</table>

<table class="table">
  <thead>
    <tr>
      {{#each columns as |column|}}
        {{component column.headerComponent
          table=table
          column=column
          classNames=column.headerClassNames
          onColumnWidthChange=(action 'columnWidthChanged')}}
      {{/each}}
    </tr>
  </thead>

  <tbody>
    {{! TODO: render diff template instead of this if }}
    {{#if table.collapsable}}
      {{#each table.content as |rowGroup|}}
        <tr class="table-row {{mergedRowClasses}} collapsable {{if (eq rowGroup.isCollapsed false) 'is-expanded' 'is-collapsed'}} {{if rowGroup.loading 'is-loading'}}" {{action 'toggleRowCollapse' rowGroup}}>

          {{#if rowGroup.label}}
            <td colspan={{columns.length}} class="table-cell">
              {{rowGroup.label}}
            </td>
          {{else}}
            {{yield rowGroup}}
          {{/if}}
        </tr>
        {{#if (get rowGroup rowGroupDataName)}}
          {{#each (get rowGroup rowGroupDataName) as |childRow|}}
            <tr class="table-row {{if rowGroup.isCollapsed 'is-collapsed'}}">
              {{yield childRow}}
            </tr>
          {{/each}}
        {{else}}
          <tr class="is-collapsed">
            {{yield}}
          </tr>
        {{/if}}
      {{/each}}
    {{else}}
      {{#each table.content as |row|}}
        <tr class="table-row {{mergedRowClasses}}" style={{rowHeight}}>
          {{yield row}}
        </tr>
      {{/each}}
    {{/if}}
  </tbody>
</table>

Refactor an each/else to an if/each/else to work around an Ember bug
Refactor an each/else to an if/each/else to work around an Ember bug

See https://github.com/emberjs/ember.js/issues/12716

This problem occurs when using a 'collapsable' table.
When a row group is initially rendered in the collapsed state it `yield`s; any {{table-columns}} used inside here aren't cleaned up properly (they're removed from the DOM but `willDestroyElement` is never called so they never unregister, and the corresponding header will always hold a reference to this outdated component.)
