Addepar Table Emberjs Row Selection

Question

I am new to emberjs and just started using addepar table. I need to add my own customization on click of a row in the table. Could someone please tell how can I override the default click/or row selection operation for the addpar table?

I am trying to achieve to call a new route on click of a row at any column in a row. Render the new route based on the row selected.. say displaying summary and detail of the record. Addepar table displays list of summary of records on click of a row displays in details.

Please let me know the steps to customize on click for entire row selection.

thanks, eskarthick

Answer 1

To do this you extend Ember Table and override the row view. The row view setting is here, and defaults to Ember.Table.TableRow :

https://github.com/Addepar/ember-table/blob/master/src/component.coffee#L119

The result will look something like this:

App.MyTableComponent = Ember.Table.EmberTableComponent.extend({
  tableRowView: 'App.MyTableRow'
});

App.MyTableRow: Ember.Table.TableRow.extend({
  click: function() {
    // Handle click
  }
});

This assumes you really care about the click event. If instead you just want to do something with the row that is selected (or when it is selected), you should use the selection output of the Ember Table API and add computed properties/observers around that. See the docs at:

http://addepar.github.io/ember-table/#/ember-table/documentation