MD-Table column headers repeated visually on page and in dom?

[brendanoh]

Below shows repeated column header row which is obviously an issue. I am on 1.12.1 still so maybe this is only in my specific case. Code below image.

{{#md-table content=distributions class='bordered hoverable grey lighten-5' as |row|}} 
  {{#md-table-col row=row key="status" header='Status'}}
    {{#unless row.warning}}
      &nbsp;&nbsp;&nbsp;<i class="material-icons green-text">&#xE86C;</i>
    {{else}}
      &nbsp;&nbsp;&nbsp;<i class="material-icons red-text" title="This campaign is nearing its end or budget restrictions.">&#xE888;</i>
    {{/unless}}
  {{/md-table-col}}

  {{#md-table-col row=row key="name" header='Name'}}
    <div style='font-size: 14px;' class="capitalize">{{row.clientName}}</div>
    <div style='font-size: 11px; font-color: grey;'>{{truncate row.campaignName 50}}</div>

  {{/md-table-col}}

  {{#md-table-col row=row key="budget" header='Budget'}}
    <div style='font-size: 14px;'>{{format-basic-currency row.budget}} </div>
    <div style='font-size: 12px; font-color: grey;'>[{{format-basic-currency pd.spendLeft}} left]</div>
  {{/md-table-col}}

  {{#md-table-col row=row key="spend" header='Spend'}}
    <div style='font-size: 14px;'>{{format-basic-currency row.spend}} </div>
    <div style='font-size: 12px; font-color: grey;'>[{{format-basic-currency pd.spend}} to date]</div>  
  {{/md-table-col}}

  {{#md-table-col row=row key="type" header='Type'}}
    <div style='font-size: 14px;' class="capitalize">{{row.type}}</div><br>
  {{/md-table-col}}

{{!--   {{#md-table-col row=row key="state" header='State'}}
    <div class="capitalize">{{row.status}}</div>
  {{/md-table-col}} --}}

  {{#md-table-col row=row key="cpc" header='CPC (CPA)'}}
    <div style='font-size: 14px;'>
      {{format-basic-currency row.averageCPCDollar}}
    </div><br>
    <div style='font-size: 12px; font-color: grey;'>
       {{#if row.cpa}}({{format-basic-currency row.cpa}}){{/if}}
    </div>
  {{/md-table-col}}

  {{#md-table-col row=row key="period" header='Period'}}
      <div style='font-size: 14px;'>{{format-basic-date row.startDate 'lll'}} </div>
      {{#if row.endDate}}
        <div class="{{if pd.closeToCampaignEnd 'red' }}" style='font-size: 12px;'>
          to {{format-basic-date row.endDate 'lll'}} 
        </div>
      {{/if}}
  {{/md-table-col}}


  {{#md-table-col row=row key="actions" header='Actions'}}
    {{#link-to 'paid-distribution.index' row.id title="View Paid Distribution" class="btn-floating btn-small waves-effect waves-light red darken-1"}} <i class="material-icons">&#xE150;</i>
    {{/link-to}}
    &nbsp;
    {{#link-to 'paid-distribution.days' row.id title="Paid Distribution Days" class="btn-floating btn-small waves-effect waves-light blue-grey darken-1"}}    
    <i class="material-icons">&#xE400;</i>
    {{/link-to}}
  {{/md-table-col}}  

{{/md-table}}

Previously had this issue when i left out key=xxx in the {{#md-table-col but strangely still getting it but now on a different page.

[brendanoh]

Ome more thing. It only happens when I refresh the page but NOT when i transition to the page from another route.

[mike-north]

can you make me a small example repo? I'm happy to look into this today for you

[brendanoh]

I will see what I can do when back from lunch. Thanks @mike-north