January 30, 2013 05:42 · Jan 30, 2013
diff --git a/tableview.css b/tableview.css
@@ -0,0 +1,27 @@
+.table-view {
+    width:100%;
+    height:100%;
+    overflow:scroll;
+}
+.table-view-cell{
+    width:100%;
+    height:30px;
+    border: 1px solid #c0c0c0;
+    cursor: pointer;
+}
+.table-view-cell::after{
+    clear:both;
+}
+.table-view-cell .title{
+    padding-left:10px;
+    line-height:30px;
+}
+.table-view-cell .count{
+    float:right;
+    background-color:gray;
+    color:white;
+    font-weight: bold;
+    width:40px;
+    height:100%;
+    text-align:center;
+    line-height:30px;
diff --git a/tableview.html b/tableview.html
@@ -0,0 +1,3 @@
+<body>
+<div class="table-view" id="gist-list"></div>
+</body>
diff --git a/tableview.js b/tableview.js
@@ -0,0 +1,61 @@
+$.tableView = function (tableId) {
+    var o = {
+        table: $(tableId),
+        items: [],
+
+        setItems: function (objs) {
+            o.items = objs;
+            return o;
+        },
+        reloadData: function () {
+            o.table.empty();
+            o.render();
+            return o;
+        },
+        render: function () {
+            var my=o;
+            $.each(o.items, function (index, value) {
+                my.table.append($.tableViewCell(value).render());
+            });
+        }
+    };
+    return o;
+};
+
+$.tableViewCell = function(obj){
+    var o = {
+        title: Object.keys(obj.files)[0],
+        count: obj.comments,
+        id: obj.id,
+        cell: $("<div class='table-view-cell'></div>"),
+
+        onTitleClick: function(){
+            alert(o.title);
+        },
+        onCountClick: function(){
+            o.cell.children(".count").empty();
+            $.getJSON('https://api.github.com/gists/'+o.id,
+            function (data) {
+               o.count=data.comments;
+               o.cell.children(".count").text(o.count);
+            });
+        },
+        render: function(){
+            o.cell.empty();
+            o.cell.append("<span class='title'>"+o.title+"</span>"+
+                             "<span class='count'>"+o.count+"</span>");
+            o.cell.children(".count").on('click', this.onCountClick );
+            o.cell.children(".title").on('click', this.onTitleClick );
+            return o.cell;
+        }
+    };
+    return o;
+};
+
+$(document).ready(function () {
+    $.getJSON('https://api.github.com/users/honcheng/gists',
+    function (data) {
+        $.tableView('#gist-list').setItems(data).reloadData();
+    });
+
+});