JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/knockout/knockout/knockout-2.2.0.debug.js"></script>
<script src="http://localhost:9000/assets/js/vendor/koGrid-2.1.1.debug.js"></script>
<div class="gridStyle" data-bind="koGrid: gridOptions"></div>

CSS

/******** Grid Global ********/
.kglabel {
    display: block;
    float: left;
    font-weight: bold;
    padding-right: 5px;
}
.kgNoSelect{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/******** Grid ********/

.koGrid{
    background-color: rgb(253, 253, 253);
}

/******** Header ********/

.kgGroupPanel{
    background-color: rgb(234, 234, 234);
    overflow: hidden;
	border-bottom: 1px solid rgb(212,212,212);
}

.kgGroupPanelDescription{
	margin-top: 5px;
	margin-left: 5px;
}

.kgGroupList {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.kgGroupItem {
	float: left; 
}

.kgGroupElement {
	float: left;
	height: 100%; 
	width: 100%;
}

.kgGroupName {
    background-color: rgb(247,247,247);
    border: 1px solid rgb(212,212,212);
    padding: 3px 10px;
    float: left;
    margin-left: 0;
    margin-top: 2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-weight: bold;
}

.kgGroupItem:first-child{
	margin-left: 2px;
}

.kgRemoveGroup {
    width: 5px;
    float: right;
    -moz-opacity: 0.4;
    opacity: 0.4;
    margin-top: -1px;
    margin-left: 5px;
}
.kgRemoveGroup:hover {
    color: black;
    text-decoration: none;
    cursor: pointer;
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.kgGroupArrow {
	width: 0; 
	height: 0; 
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid black;
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 5px;
	float: right;
}

.kgTopPanel {
    position: relative;
    background-color: rgb(121, 121, 121);
	border-bottom: 1px solid rgb(212,212,212);
	color: rgb(255,250,250);
    z-index: 5; 
}
.kgHeaderContainer {
    position: relative;
    overflow: hidden;
    font-weight: bold;
}

.kgHeaderScroller {
	position:absolute;
}
.kgHeaderSortColumn{
	position:absolute;
    overflow:...

JavaScript

function mainVm(){
    var self = this;
    this.myData = ko.observableArray([{name: "Moroni", age: 50},
                                      {name: "Tiancum", age: 43},
                                      {name: "Jacob", age: 27},
                                      {name: "Nephi", age: 29},
                                      {name: "Enos", age: 34}]);
    this.gridOptions = {
            data: self.myData,
            useExternalSorting: false,
            footerVisible: false,
            canSelectRows: false,
            displaySelectionCheckbox: false, 
            showColumnMenu: false, 	
            showFilter: false,
            sortInfo: ko.observable({
                column: { "field": "age" },
        	    "direction": "asc" 
            }),
            columnDefs: [ 
                { displayName: 'Name', field: 'name', sortable: true},
                { displayName: 'Age', field: 'age', sortable: true }
            ]
        };
};
ko.applyBindings(new mainVm());