alvinsj/tableview.css

## tableview.css
.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;

## tableview.html
<body>
<div class="table-view" id="gist-list"></div>
</body>

## tableview.js
$.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();
    });

});
	.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;
	$.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();
	});

	});