JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockout-contrib.github.io/KoGrid/lib/knockout-2.2.0.js"></script>
<link rel="stylesheet" href="http://knockout-contrib.github.io/KoGrid/css/KoGrid.css">
<script src="http://knockout-contrib.github.io/KoGrid/lib/KoGrid.debug.js"></script>
<div data-bind="koGrid: gridOptions" style="height:600px;border:solid 1px #ccc;"></div>
JavaScript
function mainVm() {
var self = this;
self.removeItem = function(item){
self.myData.remove(item);
}
self.myData = ko.observableArray([{
name: "Moroni",
age: 50,
orderCatalogUpdateID: 1
}, {
name: "Tiancum",
age: 43,
orderCatalogUpdateID: 2
}, {
name: "Jacob",
age: 27,
orderCatalogUpdateID: 4
}, {
name: "Nephi",
age: 29, orderCatalogUpdateID: 1
}, {
name: "Enos",
age: 34,
orderCatalogUpdateID: 5
}]);
this.gridOptions = {
data: self.myData,
columnDefs: [{field: 'name', displayName: 'Name'},{field: 'age', displayName: 'Age'},{
field: 'orderCatalogUpdateID',
cellTemplate: '<button data-bind="click: function() { $parent.$userViewModel.removeItem($parent.entity) }">X</button>',
displayName: ' '
}]
};
};
ko.applyBindings(new mainVm());