add table

example/app.rb

@@ -44,6 +44,8 @@
 
     checkbox ['check me', 'and me'], checked:['check me']
 
+    @table = table [['column 1',' column 2'],['row','row']]
+    button('test add new row').onclick { @table << ['new row','new row']}
   end
 
 end

lib/shenmegui/controls.rb

@@ -182,6 +182,15 @@ class Label < Base
       shortcut :text
     end
 
+    class Table < Base
+      property :data
+      shortcut :data
+
+      def << row
+        data << row
+      end
+    end
+
     controls = constants.reject{|x| x==:Base}
     controls.each do |x|
       ShenmeGUI.singleton_class.instance_eval do

static/script.js

@@ -205,6 +205,23 @@ var syncHandlers = {
 
 	label: (function(target, data){
 		target.innerText = data.text;
+	}),
+
+	table: (function(target, data){
+		for(var i=0;i<target.children.length;) target.removeChild(target.children[i]);
+		var tableData = data.data;
+		var columnSize = tableData[0].length;
+		var table = document.createElement('table');
+		for(var i=0; i<tableData.length; i++){
+			var tr = document.createElement('tr');
+			for(var j=0; j<columnSize; j++){
+				var td = document.createElement('td');
+				td.innerText = tableData[i][j];
+				tr.appendChild(td);
+			}
+			table.appendChild(tr);
+		}
+		target.appendChild(table);
 	})
 
 };

static/style.scss

@@ -162,4 +162,33 @@ input[type="radio"]:checked + label:before {
 
 .label {
 	font-weight: bolder;
+}
+
+.table {
+  background-color: #808080;
+  box-sizing: border-box;
+  font-size: 11px;
+  font-family: Tahoma, Verdana;
+  color: #070707;
+  box-shadow: -1px -1px 0 0 #808080, 1px 1px 0 0 #fff;
+  border: 1px solid;
+  border-top-color: #000;
+  border-left-color: #000;
+  border-right-color: #dfdfdf;
+  border-bottom-color: #dfdfdf;
+  outline: none;
+}
+
+table {
+  border: 1px #d4d0c8 solid;
+  border-left: 1px #808080 solid;
+  border-collapse: collapse;
+  font-size: 12px;
+  background-color: #fff;
+}
+
+td {
+  vertical-align: baseline;
+  padding: 3px 15px 3px 3px;
+  border: 1px solid #d4d0c8;
 }

templates/table.erb

@@ -0,0 +1 @@
+<div id="item-<%= id %>" class="table" data-type="table"></div>