change how various table compoments are initialized

src/dom_components/model/ComponentTable.js

@@ -6,19 +6,6 @@ module.exports = Component.extend({
       type: 'table',
       tagName: 'table',
       droppable: ['tbody', 'thead', 'tfoot'],
-      columns: 3,
-      rows: 2,
-      /*
-      traits: [{
-        label: 'Columns',
-        name: 'columns',
-        changeProp: 1,
-      },{
-        label: 'Rows',
-        name: 'rows',
-        changeProp: 1,
-      }]
-      */
   }),
 
   initialize(o, opt) {
@@ -29,43 +16,8 @@ module.exports = Component.extend({
 
     // Init components if empty
     if(!components.length){
-      var rowsToAdd = [];
-
-      while(rows--){
-        var columnsToAdd = [];
-        var clm = columns;
-
-        while (clm--) {
-          columnsToAdd.push({
-            type: 'cell',
-            classes: ['cell']
-          });
-        }
-
-        rowsToAdd.push({
-          type: 'row',
-          classes: ['row'],
-          components: columnsToAdd
-        });
-      }
-      components.add(rowsToAdd);
+      components.add({type: 'tbody'});
     }
-
-    // Clean table from non rows
-    var rowsColl = [];
-    components.each(model => {
-      if(model.get('type') != 'row'){
-        model.get('components').each(row => {
-          if(row.get('type') == 'row'){
-            row.collection = components;
-            rowsColl.push(row);
-          }
-        });
-      }else{
-        rowsColl.push(model);
-      }
-    });
-    // TODO: create tbody element if it doesn't exist? components.reset(rowsColl);
   },
 
 },{

src/dom_components/model/ComponentTableBody.js

@@ -5,9 +5,42 @@ module.exports = Component.extend({
   defaults: _.extend({}, Component.prototype.defaults, {
     type: 'tbody',
     tagName: 'tbody',
-    droppable: ['tr']
+    droppable: ['tr'],
+    columns: 1,
+    rows: 1,
   }),
 
+  initialize(o, opt) {
+    Component.prototype.initialize.apply(this, arguments);
+    var components = this.get('components');
+    var rows = this.get('rows');
+    var columns = this.get('columns');
+
+    // Init components if empty
+    if(!components.length){
+      var rowsToAdd = [];
+
+      while(rows--){
+        var columnsToAdd = [];
+        var clm = columns;
+
+        while (clm--) {
+          columnsToAdd.push({
+            type: 'cell',
+            classes: ['cell']
+          });
+        }
+
+        rowsToAdd.push({
+          type: 'row',
+          classes: ['row'],
+          components: columnsToAdd
+        });
+      }
+      components.add(rowsToAdd);
+    }
+  },
+
 },{
 
   /**

src/dom_components/model/ComponentTableFoot.js

@@ -1,8 +1,8 @@
-var Component = require('./Component');
+var ComponentTableBody = require('./ComponentTableBody');
 
-module.exports = Component.extend({
+module.exports = ComponentTableBody.extend({
 
-  defaults: _.extend({}, Component.prototype.defaults, {
+  defaults: _.extend({}, ComponentTableBody.prototype.defaults, {
     type: 'tfoot',
     tagName: 'tfoot',
     droppable: ['tr']

src/dom_components/model/ComponentTableHead.js

@@ -1,8 +1,8 @@
-var Component = require('./Component');
+var ComponentTableBody = require('./ComponentTableBody');
 
-module.exports = Component.extend({
+module.exports = ComponentTableBody.extend({
 
-  defaults: _.extend({}, Component.prototype.defaults, {
+  defaults: _.extend({}, ComponentTableBody.prototype.defaults, {
     type: 'thead',
     tagName: 'thead',
     droppable: ['tr']

src/dom_components/model/ComponentTableRow.js

@@ -5,7 +5,6 @@ module.exports = Component.extend({
   defaults: _.extend({}, Component.prototype.defaults, {
       type: 'row',
       tagName: 'tr',
-      draggable: ['table', 'tbody', 'thead'],
       droppable: ['th', 'td']
   }),