Update table component init

index.html

@@ -30,7 +30,7 @@
 					<table>
 							<tr> <td>Row11</td> <td>Row12</td> <td>Row13</td> </tr>
 							<tr> <td>Row21</td> <td>Row22</td> <td>Row23</td> </tr>
-							<tr> <td>Row31</td> <td>Row32</td> <td>Row33</td> </tr>
+							<tr> <td>Row31</td> <td>Row32</td> <td><div>Div Content Row33</div></td> </tr>
 					</table>
 					<!--
 					<iframe class="iframe" src="http://player.vimeo.com/video/2?&controls=0&loop=1&color=ff0000"></iframe>

src/dom_components/model/ComponentTable.js

@@ -20,7 +20,33 @@ define(['./ComponentText'],
 
 			initialize: function(o, opt) {
 				Component.prototype.initialize.apply(this, arguments);
-				//this.listenTo(this, 'change:columns change:rows', this.render);
+				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/ComponentTableCell.js

@@ -1,4 +1,4 @@
-define(['./ComponentText'],
+define(['./Component'],
 	function (Component) {
 
 		return Component.extend({

src/dom_components/view/ComponentTableCellView.js

@@ -1,4 +1,4 @@
-define(['backbone', './ComponentTextView'],
+define(['backbone', './ComponentView'],
 	function (Backbone, ComponentView) {
 
 	return ComponentView.extend({

src/editor/config/config.js

@@ -193,6 +193,14 @@ define(function () {
 						type: 'map',
 						style: {height: '350px'}
 					},
+	      },{
+					id: 'table',
+	        label: 'Table',
+	        attributes: {class:'fa fa-table'},
+	        content: {
+						type: 'table',
+						style: {height: '150px', width: '100%'}
+					},
 	      },{
 					id: 'video',
 	        label: 'Video',

src/selector_manager/view/ClassTagView.js

@@ -109,7 +109,7 @@ define(['backbone', 'text!./../template/classTag.html'],
     updateInputLabel: function(){
       if(!this.$labelInput)
         this.$labelInput = this.$el.find('input');
-      var size = this.$labelInput.val().length - 2;
+      var size = this.$labelInput.val().length - 1;
       size = size < 1 ? 1 : size;
       this.$labelInput.attr('size', size);
     },