New Twiddle

components.bar-column.js

import Ember from 'ember';

export default Ember.Component.extend({
  didRender() {
    console.log("bar-column#didRender");
  }
});

components.foo-column.js

import Ember from 'ember';

export default Ember.Component.extend({
  didRender() {
    console.log("foo-column#didRender");
  }
});

components.my-table.js

import Ember from 'ember';

export default Ember.Component.extend({
  selected: true,

  actions: {
    toggleSelected() {
      this.toggleProperty('selected');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#my-table as |columns|}}
  {{columns.foo}}
  {{columns.bar}}
  {{columns.selected}}
{{/my-table}}

templates.components.bar-column.hbs

bar

templates.components.foo-column.hbs

foo - selected? {{selected}}

templates.components.my-table.hbs

<button onclick={{action 'toggleSelected'}}>
	Toggle selected
 </button>
 
 <hr>

{{yield (hash
	foo=(component 'foo-column' selected=selected)
  bar=(component 'bar-column')
  selected=selected
 )}}

twiddle.json

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