JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://rniemeyer.github.io/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.io/knockout-kendo/css/kendo.default.min.css">
<script src="http://rniemeyer.github.io/knockout-kendo/js/jquery.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/kendo.web.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-3.0.0.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<div data-bind="kendoGrid: { data: items, rowTemplate: 'rowTmpl', useKOTemplates: true}"> </div>
<button data-bind="click: addItem">Add Item</button>
<script id="rowTmpl" type="text/html">
    <tr>
        <td>
            Row index: <span data-bind="text: $($element).closest('tr').index()"></span>
        </td>
        <td>
            <input type="text" data-bind="value: name"/>
        </td>
        <td>
            <a href="#" data-bind="click: $root.removeItem">x</a>
        </td>
    </tr>
</script>

JavaScript

var ViewModel = function() {
    this.items = ko.observableArray([
        { id: "1", name: ko.observable("apple")},
        { id: "2", name: ko.observable("orange")},
        { id: "3", name: ko.observable("banana")}
    ]);
    this.addItem = function() {
        var num = this.items().length + 1;
        this.items.push({ id: num, name: "new" + num});
    };

    this.removeItem = function(item) {
        this.items.remove(item);
    }.bind(this);
};

ko.applyBindings(new ViewModel());