Support cell and column types

addon/classes/Column.js

@@ -64,12 +64,30 @@ export default class Column extends Ember.Object.extend({
   subColumns: null,
 
   /**
-   * Component name for the column header
-   * @property headerComponent
+   * Type of column component
+   *
+   * @property type
+   * @type {String}
+   * @default 'base'
+   */
+  type: 'base',
+
+  /**
+   * Type of cell component
+   *
+   * @property cellType
+   * @type {String}
+   * @default 'base'
+   */
+  cellType: 'base',
+
+  /**
+   * Component name for the column
+   * @property component
    * @type {String}
    * @optional
    */
-  headerComponent: null,
+  component: null,
 
   /**
    * Component name for the column cells. This component is automatically passed row,

addon/classes/Table.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
-import Row from './Row';
-import Column from './Column';
+import Row from 'ember-light-table/classes/Row';
+import Column from 'ember-light-table/classes/Column';
 
 const {
   computed,
@@ -46,6 +46,12 @@ export default class Table extends Ember.Object.extend({
    */
   selectedRows: computed.filterBy('rows', 'selected', true).readOnly(),
 
+  /**
+   * @property visibleRows
+   * @type {Ember.Array}
+   */
+  visibleRows: computed.filterBy('rows', 'hidden', false).readOnly(),
+
   /**
    * @property sortedColumns
    * @type {Ember.Array}

addon/components/lt-cell.js → addon/components/cells/base.js

@@ -1,31 +1,56 @@
 import Ember from 'ember';
-import layout from '../templates/components/lt-cell';
+import layout from 'ember-light-table/templates/components/cells/base';
 
 const {
   computed
 } = Ember;
 
-export default Ember.Component.extend({
+/**
+ * @module Cell Types
+ * @class Base Cell
+ */
+const Cell = Ember.Component.extend({
   layout,
   tagName: 'td',
   classNames: ['lt-cell'],
   attributeBindings: ['width'],
   classNameBindings: ['align', 'isSorted', 'column.cellClassNames'],
 
-  column: null,
-  row: null,
-  tableActions: null,
-
-  rawValue: null,
+  width: computed.readOnly('column.width'),
+  isSorted: computed.readOnly('column.sorted'),
 
   align: computed('column.align', function() {
     return `align-${this.get('column.align')}`;
   }).readOnly(),
 
-  isSorted: computed.readOnly('column.sorted'),
+  /**
+   * @property column
+   * @type {Column}
+   */
+  column: null,
 
-  width: computed.readOnly('column.width'),
+  /**
+   * @property row
+   * @type {Row}
+   */
+  row: null,
 
+  /**
+   * @property tableActions
+   * @type {Object}
+   */
+  tableActions: null,
+
+  /**
+   * @property rawValue
+   * @type {Mixed}
+   */
+  rawValue: null,
+
+  /**
+   * @property value
+   * @type {Mixed}
+   */
   value: computed('rawValue', function() {
     const rawValue = this.get('rawValue');
     const format = this.get('column.format');
@@ -35,3 +60,9 @@ export default Ember.Component.extend({
     return rawValue;
   }).readOnly()
 });
+
+Cell.reopenClass({
+  positionalParams: ['column', 'row']
+});
+
+export default Cell;

addon/components/lt-column.js → addon/components/columns/base.js

@@ -1,38 +1,70 @@
 import Ember from 'ember';
-import layout from '../templates/components/lt-column';
+import layout from 'ember-light-table/templates/components/columns/base';
 
 const {
   isEmpty,
   computed
 } = Ember;
 
-export default Ember.Component.extend({
+/**
+ * @module Column Types
+ * @class Base Column
+ */
+const Column = Ember.Component.extend({
   layout,
   tagName: 'th',
   classNames: ['lt-column'],
   attributeBindings: ['width', 'colspan', 'rowspan'],
   classNameBindings: ['align', 'isGroupColumn:lt-group-column', 'isSortable', 'isSorted', 'column.classNames'],
 
+  width: computed.readOnly('column.width'),
+  isGroupColumn: computed.readOnly('column.isGroupColumn'),
+  isSortable: computed.readOnly('column.sortable'),
+  isSorted: computed.readOnly('column.sorted'),
+
+  align: computed('column.align', function() {
+    return `align-${this.get('column.align')}`;
+  }).readOnly(),
+
+  /**
+   * @property column
+   * @type {Column}
+   */
   column: null,
+
+  /**
+   * @property tableActions
+   * @type {Object}
+   */
   tableActions: null,
-  sortIcons: null,
 
-  width: computed.oneWay('column.width'),
-  isGroupColumn: computed.oneWay('column.isGroupColumn'),
-  isSortable: computed.oneWay('column.sortable'),
-  isSorted: computed.oneWay('column.sorted'),
+  /**
+   * @property sortIcons
+   * @type {Object}
+   */
+  sortIcons: null,
 
+  /**
+   * @property colspan
+   * @type {Number}
+   */
   colspan: computed('column', 'column.visibleSubColumns.[]', function() {
     let subColumns = this.get('column.visibleSubColumns');
     return !isEmpty(subColumns) ? subColumns.length : 1;
   }),
 
+  /**
+   * @property rowspan
+   * @type {Number}
+   */
   rowspan: computed('column.visibleSubColumns.[]', function() {
     let subColumns = this.get('column.visibleSubColumns');
     return !isEmpty(subColumns) ? 1 : 2;
-  }),
-
-  align: computed('column.align', function() {
-    return `align-${this.get('column.align')}`;
   })
 });
+
+Column.reopenClass({
+  positionalParams: ['column']
+});
+
+export default Column;

addon/components/light-table.js

@@ -1,7 +1,6 @@
 import Ember from 'ember';
-import layout from '../templates/components/light-table';
-import callAction from '../utils/call-action';
-import Table from '../classes/Table';
+import layout from 'ember-light-table/templates/components/light-table';
+import Table from 'ember-light-table/classes/Table';
 
 const {
   computed,
@@ -85,7 +84,7 @@ const LightTable =  Ember.Component.extend({
     this._super(...arguments);
     assert(`[ember-light-table] table must be an instance of Table`, this.get('table') instanceof Table);
   }
-  
+
 });
 
 LightTable.reopenClass({

addon/components/lt-body.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
-import layout from '../templates/components/lt-body';
-import callAction from '../utils/call-action';
+import layout from 'ember-light-table/templates/components/lt-body';
+import callAction from 'ember-light-table/utils/call-action';
 
 const {
   computed
@@ -40,6 +40,7 @@ export default Ember.Component.extend({
   layout,
   classNames: ['lt-body-wrap'],
   classNameBindings: ['canSelect', 'multiSelect', 'canExpand'],
+
   /**
    * @property table
    * @type {Table}
@@ -117,22 +118,33 @@ export default Ember.Component.extend({
    */
   expandOnClick: true,
 
+  /**
+   * If true, the body block will yield columns and rows, allowing you
+   * to define your own table body
+   *
+   * @property overwrite
+   * @type {Boolean}
+   * @default false
+   */
+  overwrite: false,
+
   /**
    * ID of main table component. Used to generate divs for ember-wormhole
+   *
    * @type {String}
    */
   tableId: null,
-  
+
   /**
    * @property scrollBuffer
    * @type {Number}
    * @default 500
    */
   scrollBuffer: 500,
 
-  rows: computed.filterBy('table.rows', 'hidden', false),
-  visibleColumns: computed.readOnly('table.visibleColumns'),
-  colspan: computed.readOnly('visibleColumns.length'),
+  rows: computed.readOnly('table.visibleRows'),
+  columns: computed.readOnly('table.visibleColumns'),
+  colspan: computed.readOnly('columns.length'),
 
   _currSelectedIndex: -1,
   _prevSelectedIndex: -1,
@@ -200,10 +212,10 @@ export default Ember.Component.extend({
     onRowDoubleClick( /* row */ ) {
       callAction(this, 'onRowDoubleClick', ...arguments);
     },
-    
+
     /**
-     * onScrolledToBottom action - sent when use scrolls to the bottom
-     * 
+     * onScrolledToBottom action - sent when user scrolls to the bottom
+     *
      * @event onScrolledToBottom
      */
     onScrolledToBottom() {

addon/components/lt-foot.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
-import layout from '../templates/components/lt-foot';
-import TableHeaderMixin from '../mixins/table-header';
+import layout from 'ember-light-table/templates/components/lt-foot';
+import TableHeaderMixin from 'ember-light-table/mixins/table-header';
 
 /**
  * @module Components

addon/components/lt-head.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
-import layout from '../templates/components/lt-head';
-import TableHeaderMixin from '../mixins/table-header';
+import layout from 'ember-light-table/templates/components/lt-head';
+import TableHeaderMixin from 'ember-light-table/mixins/table-header';
 
 /**
  * @module Components

addon/components/lt-row.js

@@ -1,11 +1,11 @@
 import Ember from 'ember';
-import layout from '../templates/components/lt-row';
+import layout from 'ember-light-table/templates/components/lt-row';
 
 const {
   computed
 } = Ember;
 
-export default Ember.Component.extend({
+const Row = Ember.Component.extend({
   layout,
   tagName: 'tr',
   classNames: ['lt-row'],
@@ -22,3 +22,9 @@ export default Ember.Component.extend({
   isSelected: computed.readOnly('row.selected'),
   isExpanded: computed.readOnly('row.expanded')
 });
+
+Row.reopenClass({
+  positionalParams: ['row', 'columns']
+});
+
+export default Row;

addon/components/lt-scrollable.js

@@ -1,5 +1,5 @@
 import ScrollableComponent from 'ember-scrollable/components/scrollable';
 
 export default ScrollableComponent.extend({
-  classNames: 'lt-scrollable'
+  classNames: ['lt-scrollable']
 });

addon/components/lt-spanned-row.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import layout from '../templates/components/lt-spanned-row';
+import layout from 'ember-light-table/templates/components/lt-spanned-row';
 
 export default Ember.Component.extend({
   layout,

addon/mixins/table-header.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import callAction from '../utils/call-action';
+import callAction from 'ember-light-table/utils/call-action';
 
 const {
   computed
@@ -58,9 +58,9 @@ export default Ember.Mixin.create({
   tableId: null,
 
   renderInPlace: computed.oneWay('fixed'),
-  visibleColumnGroups: computed.oneWay('table.visibleColumnGroups'),
-  visibleSubColumns: computed.oneWay('table.visibleSubColumns'),
-  visibleColumns: computed.oneWay('table.visibleColumns'),
+  columnGroups: computed.oneWay('table.visibleColumnGroups'),
+  subColumns: computed.oneWay('table.visibleSubColumns'),
+  columns: computed.oneWay('table.visibleColumns'),
 
   sortIcons: computed('iconAscending', 'iconDescending', function() {
     return this.getProperties(['iconAscending', 'iconDescending']);

addon/templates/components/lt-column.hbs → addon/templates/components/columns/base.hbs

@@ -1,5 +1,5 @@
-{{#if column.headerComponent}}
-  {{component column.headerComponent tableActions=tableActions sortIcons=sortIcons column=column}}
+{{#if column.component}}
+  {{component column.component tableActions=tableActions sortIcons=sortIcons column=column}}
 {{else}}
   {{column.label}}
   {{#if column.sorted}}