Ember Table built with compossible components. https://github.com/emberjs/ember.js/issues/11124

application.hbs

{{#my-table model=arrayOfData as |table|}}

  {{#my-column table=table header='FirstName'}}
    {{firstName}}
  {{/my-column}}
  
  {{#my-column table=table header='LastName'}}
    {{lastName}}
  {{/my-column}}
  
  {{#my-column table=table header='FullName'}}
    {{firstName}} {{lastName}}
  {{/my-column}}
  
{{/my-table}}

application.js

Ember.Controller.extend({
  
  arrayOfData: [{
    firstName: 'Bob',
    lastName: 'Smith'
  },{
    firstName: 'Jane',
    lastName: 'Doe'
  },{
    firstName: 'Bill',
    lastName: 'Todd'
  }]
});

my-column.js

Ember.Component.extend({
  
  init: function() {
    this._super.apply(this, arguments);

    var table = this.attrs.table.value;
    var blockTemplate = this.get('_blockTemplate'); // This does not exist yet
    
    table.registerColumns.call(table, {template: blockTemplate, attrs: this.attrs});
  },
  
  // Do not render the block template
  render: function() {}
});

my-table.hbs

{{yield this}}

<table>
  <thead>
    <tr>
      {{#each headers as |header|}}
       <th>{{header}}</th>
      {{/each}}
    </tr>
  </thead>
  <tbody>
    {{#each model as |data|}}
      <tr>
        {{#each columns as |column|}}
          <td>{{component template=column.template attrs=column.attrs context=data}}</td> {{!-- Does not work --}}
        {{/each}}
      </tr>
    {{/each}}
  </tbody>
</table>

my-table.js

Ember.Component.extend({
  columns: null,
  headers: null,
  
  init() {
    this._super.apply(this, arguments);
    this.setProperties({
      columns: Ember.A(),
      headers: Ember.A()
    })
  },
  
  registerColumns: function(columnObject) {
    this.get('columns').pushObject(columnObject); 
    this.get('headers').pushObject(columnObject.attrs.header);
  },
});