JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <title>kgEditable</title>
    <link rel="stylesheet" type="text/css" href="http://ericmbarnard.github.com/KoGrid/css/KoGrid.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" />
  </head>
  <body>
      
    <div class="gridStyle" style="width: 100%; height: 320px;"
         data-bind="koGrid: gridOptions"></div>
    <br/>
    <a data-bind='visible: !itemsChecked().length, click: addItem' style="float: right" class="btn">
        Add item
    </a>
    <a data-bind='visible: itemsChecked().length, click: removeItem' style="float: right" class="btn  btn-danger">
        Remove Selected Items
    </a>
    <label data-bind="html: log"></label>
    
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
    <script type="text/javascript" src="http://ericmbarnard.github.com/KoGrid/lib/KoGrid.debug.js"></script>
    <script type="text/javascript" src="http://gear58.aspbeta.arvixe.com/cdn/kgeditable.js"></script>
  </body>
</html>

CSS

.modified {
    background-color: red;
}

JavaScript

var tplDefault = '<div><div data-bind="attr: { \'class\': \'kgCellText colt\' + $index()}, html: $data.getProperty($parent)" /></div></div>';

var tplEditable = '<div><input type="text" data-bind="attr: { \'class\': \'kgCellInput colt\' + $index()}, value: $parent.entity[$data.field]" /></div>';

function tplDefaultEditable() {
    // Uncomment this line to start editing on double clicking and use the class modified for hilights.
    //return kgEditable(tplDefault, 'tplEditable', 'dblclick', 'modified', 'onEdit', 'onChange');

    // Note that the edit template needs to be referred to as a string.
    return kgEditable(tplDefault, 'tplEditable', '', '', 'onEditStart', 'onChange');
}

var initData = [
    { name: 'Well-Travelled Kitten', sales: 352, price: 75.95 },
    { name: 'Speedy Coyote', sales: 89, price: 190.00 },
    { name: 'Furious Lizard', sales: 152, price: 25.00 },
    { name: 'Indifferent Monkey', sales: 1, price: 99.95 },
    { name: 'Brooding Dragon', sales: 0, price: 6350 },
    { name: 'Ingenious Tadpole', sales: 39450, price: 0.35 },
    { name: 'Optimistic Snail', sales: 420, price: 1.50 }
];

var viewModel = function (items) {
    var self = this;
    this.items = ko.observableArray(items);
    this.itemsChecked = ko.observableArray([]);
    this.log = ko.observable('');
    this.onEditStart = function (value, element) {
        self.log('Editing ' + this.$data.field + '(' + value() + ')<br/>' + self.log());
    };
    this.onChange = function (value, element) {
        self.log('Modified ' + this.$data.field + '(' + value.initValue + ' -> ' + value() + ')<br/>' + self.log());
    };
    this.addItem = function () {
        var newItem = { name: ko.observable('New item'), sales: ko.observable(0), price: ko.observable(100) };
        self.items.push(newItem);
    };
    this.removeItem = function () {
        $.each(self.itemsChecked(), function () {
            ko.utils.arrayRemoveItem(self.items(), this);
        });
       ...