New Twiddle

controllers.application.js

import Ember from 'ember';

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

my-component.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  numRowClicks: 0,
  
	actions: {
    onClick(e) {
    	this.set('numRowClicks', this.get('numRowClicks') + 1);
    },
  },
});

my-component.template.hbs

<table>
	<caption>This is a table</caption>
	{{tr-component on-click=(action 'onClick')}}
</table>

<p>Number of row clicks: {{numRowClicks}}</p>

styles.app.css

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

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

tr.is-focused {
 outline: 1px dotted;
}

td {
  border: 1px solid #ccc;
  padding: 8px;
}

.visually-hidden-cell {
	width: 0;
}

.secret-button {
  position: absolute;
  top: -9999px;
}

templates.application.hbs

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

{{my-component}}

tr-component.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'tr',
  isExpanded: false,
  
  didInsertElement() {
    this._super(...arguments);
    let $secretButton = this.$('.secret-button');
    $secretButton.on('focusin focusout', function() {
    	$(this).closest('tr').toggleClass('is-focused');
    })
  },
  
  click() {
    if (this.get('on-click')) {
			this.get('on-click')();
      this.toggleProperty('isExpanded');
    }
  },
  
  actions: {
    clickButton(e) {
      console.log('button clicked');
      e.stopPropagation();
    },
    
    clickLink(e) {
    	e.stopPropagation();
  	},
  },
});

tr-component.template.hbs

{{#if on-click}}
  <td class="visually-hidden-cell">
    <button class="secret-button" aria-expanded="{{isExpanded}}">{{if isExpanded 'Collapse' 'Expand'}} Summary Panel</button>
  </td>
{{/if}}
<td>
  <button onclick={{action 'clickButton'}}>button</button>
</td>
<td>Cell</td>
<td>
  <button onclick={{action 'clickLink'}}>button</button>
</td>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}