colgroup quirks

components.t-colgroup.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'colgroup',
  
  attributeBindings: ['span']
});

components.t-table.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'table',
  
  rows: Ember.computed.alias('data')
});

components.t-tbody.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'tbody'
});

components.t-td.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'td'
});

components.t-th.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  tagName: 'th',
  
  attributeBindings: ['colspan', 'rowspan']
  
});

components.t-thead.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'thead'
});

components.t-tr.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'tr'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'colgroups',
  
  data: Ember.computed({
  	get() {
    	return [
      	Ember.Object.create({
        	type: 'Foo',
          preCharge: 100,
          postCharge: 100,
          totalCharge: 100,
          preBalance: 100,
          postBalance: 100,
          totalBalance: 100
        })
      ]
    }
  })
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

colgroup {
	border-right: 1px solid;
}

tr {
 border-top: 1px solid;
}

td, th {
  text-align: left;
  padding: 4px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

<h3>Table Components</h3>

{{#t-table data=data as |t rows|}}
	{{t.colgroup}}
	{{t.colgroup span=3}}
  {{t.colgroup span=3}}
  {{#t.thead}}
  	{{#t.tr}}
    	{{#t.th rowspan=2}}Type{{/t.th}}
      {{#t.th colspan=3}}Charges{{/t.th}}
      {{#t.th colspan=3}}Balances{{/t.th}}
    {{/t.tr}}
    {{#t.tr}}
    	{{#t.th}}Pre{{/t.th}}
      {{#t.th}}Post{{/t.th}}
      {{#t.th}}Total{{/t.th}}
      {{#t.th}}Pre{{/t.th}}
      {{#t.th}}Post{{/t.th}}
      {{#t.th}}Total{{/t.th}}
    {{/t.tr}}
  {{/t.thead}}
  {{#t.tbody}}
  	{{#each rows as |row|}}
    	{{#link-to home tagName="tr"}}
    		{{#t.th}}{{row.type}}{{/t.th}}
      	{{t.td value=row.preCharge}}
      	{{t.td value=row.postCharge}}
      	{{#t.td}}{{row.totalCharge}}{{/t.td}}
      	{{t.td value=row.preBalance}}
      	{{t.td value=row.postBalance}}
      	{{t.td value=row.totalBalance}}
    	{{/link-to}}
    {{/each}}
  {{/t.tbody}}
{{/t-table}}

<h3>Raw HTML</h3>

<table>
	<colgroup></colgroup>
	<colgroup span=3></colgroup>
  <colgroup span=3></colgroup>
  <thead>
  	<tr>
    	<th rowspan=2>Type</th>
      <th colspan=3>Charges</th>
      <th colspan=3>Balances</th>
    </tr>
    <tr>
    	<th>Pre</th>
      <th>Post</th>
      <th>Total</th>
      <th>Pre</th>
      <th>Post</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<th>Foo</th>
      <td>100</td>
      <td>100</td>
      <td>100</td>
      <td>100</td>
      <td>100</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

templates.components.t-colgroup.hbs

{{yield}}

templates.components.t-table.hbs

{{yield (hash
	colgroup=(component 't-colgroup')
  thead=(component 't-thead')
  tbody=(component 't-tbody')
  tr=(component 't-tr')
  th=(component 't-th')
  td=(component 't-td')
) rows}}

templates.components.t-tbody.hbs

{{yield}}

templates.components.t-td.hbs

{{#if hasBlock}}
	{{yield}}
{{else}}
	{{value}}
{{/if}}

templates.components.t-th.hbs

{{yield}}

templates.components.t-thead.hbs

{{yield}}

templates.components.t-tr.hbs

{{yield}}

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
  }
}