JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="http://knockoutjs.com/examples/resources/knockout.simpleGrid.3.0.js"></script>
<div class='liveExample'>     
    <div data-bind='simpleGrid: gridViewModel, simpleGridTemplate:"custom_grid_template"'> </div>      
</div>

<script type="text/javascript" id="custom_grid_template">
<table class="ko-grid" cellspacing="0">
                        <thead>
                            <tr data-bind="foreach: columns">
                               <th data-bind="text: headerText"></th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: itemsOnCurrentPage">
                           <tr data-bind="foreach: $parent.columns">
                               <!--ko if: typeof rowText == 'object' && typeof rowText.action == 'function'-->
                               <td><button data-bind="click:rowText.action($parent)">action</button></td>
                               <!-- /ko -->
                               
                               <!--ko if: headerText == 'Sizes'-->
                <td>
                    <input data-bind="checked: $parent.selected,attr:{name:'sizeGroup'+ $parentContext.$index()}" value="a" type="radio" />A
                    <input data-bind="checked: $parent.selected,attr:{name:'sizeGroup'+$parentContext.$index()}" value="b" type="radio" name="sizeGroup" />B
                    <input data-bind="checked: $parent.selected,attr:{name:'sizeGroup'+$parentContext.$index()}" value="c" type="radio" name="sizeGroup" />C
                </td>
                <!-- /ko -->
                               
                               <!--ko ifnot: headerText == 'Sizes' ||(typeof rowText == 'object' && typeof rowText.action == 'function')-->
                               <td data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></td>
                              ...

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
.ko-grid th { text-align:left; background-color: Black; color:White; }
.ko-grid td, th { padding: 0.4em; }
.ko-grid tr:nth-child(odd) { background-color: #DDD; }
.ko-grid-pageLinks { margin-bottom: 1em; }
.ko-grid-pageLinks a { padding: 0.5em; }
.ko-grid-pageLinks a.selected { background-color: Black; color: White; }
.liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */

li { list-style-type: disc; margin-left: 20px; }

JavaScript

var initialData = [
    { name: "Well-Travelled Kitten",selected:ko.observable(), sales: 352, price: 75.95, size:["a","c","b"]},
    { name: "Speedy Coyote",selected:ko.observable(), sales: 89, price: 190.00, size:["a","c","b"]},
    { name: "Furious Lizard",selected:ko.observable(), sales: 152, price: 25.00, size:["a","c","b"]},
    { name: "Indifferent Monkey",selected:ko.observable(), sales: 1, price: 99.95, size:["a","c","b"]},
    { name: "Brooding Dragon",selected:ko.observable(), sales: 0, price: 6350, size:["a","c","b"]},
    { name: "Ingenious Tadpole",selected:ko.observable(), sales: 39450, price: 0.35, size:["a","c","b"]},
    { name: "Optimistic Snail",selected:ko.observable(), sales: 420, price: 1.50, size:["a","c","b"]}
];
 
var PagedGridModel = function(items) {
    this.items = ko.observableArray(items);
    
    this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "Item Name", rowText: "name" },
            { headerText: "Sales Count", rowText: "sales" },
            { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } },
            { headerText: "Sizes", rowText: "sizes" },
             { headerText: "Action", rowText: {action: function(item){
                        return function(){
                            alert(item.name);
                            alert(item.selected());
                            //self.removeItem(item);
                            //alert(self.items().length);
                        }
                    }}}
        ],
        pageSize: 4
    });
};
 
ko.applyBindings(new PagedGridModel(initialData));