JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0beta.debug.js"></script>
<link rel="stylesheet" href="http://ericmbarnard.github.com/KoGrid/css/KoGrid.css">
<script src="http://ericmbarnard.github.com/KoGrid/scripts/koGrid.debug.js"></script>
<div data-bind="koGrid: { data: myObsArray,
                          autogenerateColumns: false,
                          columnDefs: [
                              { field: 'test', width: 120, headerTemplate: 'testTmpl' },
                              { field: 'test2', width: 120 }
                          ]}">
</div>

<script type="text/html" id="testTmpl">
    <div data-bind="click: $data.sort, css: { kgSorted: !$data.noSortVisible() }" style="background-color: green;">
        <span data-bind="text: $data.displayName"></span>
    </div>
    <div data-bind="visible: $parent.filterVisible">
        <input type="text" data-bind="value: $data.column.filter, valueUpdate: 'afterkeydown', click: $root.doSomething" style="width: 80%" tabindex="1" />
    </div>
</script>

JavaScript

var arr = ko.observableArray([{ test: new Date(), test2: "lorem ipsum"}]);

var vm = {
    filterInfo: ko.observable({}),
    myObsArray: arr,
    doSomething: function() {
         alert(' Did Something ' );   
    }
};

ko.applyBindings(vm);