How to use ember-table - 10 common examples

// BEGIN-SNIPPET bar-table-cell
import Ember from 'ember';
import TableCell from 'ember-table/views/table-cell';

export default TableCell.extend({
  templateName: 'bar_table/bar-cell',
  classNameBindings: ['column.color'],

  barWidth: Ember.computed(function() {
    var properties = this.getProperties('column', 'row');
    var column = properties.column;
    var row = properties.row;
    if (!(column && row)) {
      return 0;
    }
    return Math.round(+this.get('cellContent'));
  }).property('column', 'row', 'cellContent'),

  histogramStyle: Ember.computed(function() {
    return new Ember.Handlebars.SafeString('width: ' + (this.get('barWidth')) + '%;');
  }).property('barWidth')

// BEGIN-SNIPPET horizon-table-cell
import Ember from 'ember';
import TableCell from 'ember-table/views/table-cell';
import d3HorizonUtils from '../utils/horizon';

export default TableCell.extend({
  templateName: 'empty-cell',
  heightBinding: 'controller.rowHeight',

  horizonContent: Ember.computed(function() {
    var normal = d3.random.normal(1.5, 3);
    var content = [];
    for (var i = 0; i < 100; i++) {
      content.pushObject([i, normal()]);
    }
    return content;
  }).property(),

  onWidthDidChange: Ember.observer(function() {
    this.$('svg').remove();
    this.renderD3View();
  }, 'width'),

// BEGIN-SNIPPET editable-table-cell
import Ember from 'ember';
import TableCell from 'ember-table/views/table-cell';

export default TableCell.extend({
  className: 'editable-table-cell',
  templateName: 'editable-table/editable-table-cell',
  isEditing: false,
  type: 'text',

  innerTextField: Ember.TextField.extend({
    typeBinding: 'parentView.type',
    valueBinding: 'parentView.cellContent',
    didInsertElement: function() {
      this.$().focus();
      // TODO(azirbel): Call this._super()
    },
    focusOut: function() {
      this.set('parentView.isEditing', false);
    }
  }),

// BEGIN-SNIPPET financial-table-cell
import TableCell from 'ember-table/views/table-cell';

export default TableCell.extend({
  templateName: 'financial-table/financial-table-cell'
});
// END-SNIPPET

// BEGIN-SNIPPET ajax-image-table-cell
import TableCell from 'ember-table/views/table-cell';

export default TableCell.extend({
  templateName: 'ajax-table/ajax-cell',
  classNames: 'img-table-cell'
});
// END-SNIPPET

// BEGIN-SNIPPET sparkline-table-cell
import Ember from 'ember';
import TableCell from 'ember-table/views/table-cell';

export default TableCell.extend({
  templateName: 'empty-cell',
  heightBinding: 'controller.rowHeight',

  onContentOrSizeDidChange: Ember.observer(function() {
    this.$('svg').remove();
    this.renderD3View();
  }, 'row', 'width'),

  didInsertElement: function() {
    this.renderD3View();
    // TODO(azirbel): Add _this.super()
  },

  renderD3View: function() {
    var data = this.get('row.timeseries');
    if (!data) {

// BEGIN-SNIPPET rating-table-cell
import Ember from 'ember';
import TableCell from 'ember-table/views/table-cell';

export default TableCell.extend({
  classNames: 'rating-table-cell',
  templateName: 'editable-table/rating-table-cell',

  onRowContentDidChange: Ember.observer(function() {
    this.applyRating(this.get('cellContent'));
  }, 'cellContent'),

  didInsertElement: function() {
    this._super();
    this.onRowContentDidChange();
  },

  applyRating: function(rating) {
    this.$('.rating span').removeClass('active');
    var span = this.$('.rating span').get(rating);
    Ember.$(span).addClass('active');

// BEGIN-SNIPPET financial-table-tree-cell
import Ember from 'ember';
import TableCell from 'ember-table/views/table-cell';

export default TableCell.extend({
  templateName: 'financial-table/financial-table-tree-cell',
  classNames: 'ember-table-table-tree-cell',

  paddingStyle: Ember.computed(function() {
    return new Ember.Handlebars.SafeString('padding-left:' + (this.get('row.indentation')) + 'px;');
  }).property('row.indentation')
});
// END-SNIPPET

// BEGIN-SNIPPET financial-table-header-cell
import HeaderCell from 'ember-table/views/header-cell';

export default HeaderCell.extend({
  templateName: 'financial-table/financial-table-header-cell'
});
// END-SNIPPET

// BEGIN-SNIPPET financial-table-header-tree-cell
import HeaderCell from 'ember-table/views/header-cell';

export default HeaderCell.extend({
  templateName: 'financial-table/financial-table-header-tree-cell',
  classNames:   'ember-table-table-header-tree-cell'
});
// END-SNIPPET