JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Javascript/src/cog.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Javascript/src/cog.utils.js"></script>
<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<script src="https://raw.github.com/AndersMalmgren/Knockout.Extensions/master/Javascript/src/knockout.bindings.dataTables.js"></script>
<script src="https://raw.github.com/AndersMalmgren/Knockout.Bindings/master/src/knockout.bindings.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css">
<table data-bind="dataTable: {
            dataSource: getData,            
            rowTemplate: 'row-template',
            columns: [
                'selectedOption'
            ]
        }">
    <thead>
        <tr>
            <td>Options (Not working)</td>
            <td>Textbox (Working)</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>        

<script id="row-template" type="text/html">
    <td><select data-bind="options: $parent.options,
           optionsText: 'option',
           value: selectedOption,        
           optionsCaption: ' '">
        </select></td>
    <td>
        <input data-bind="value: text" />
    </td>
</script>

JavaScript

ko.validation.configure({
    messagesOnModified: true,
    grouping: { deep: true, observable: true } 
});

RootViewModel = function() {
    this.model = new ViewModel();
    this.selectedModel = ko.observable();
    this.selectedModel.subscribe(function(model) {
        model.load();
    });
}

ViewModel = function() {
    this.table = ko.observable();
    this.options = [new OptionViewModel("one") , new OptionViewModel("two"), new OptionViewModel("three")];
    this.data = ko.observableArray();
    this.load();
};
ViewModel.prototype = {
    getData: function(options, callback) {
        var start = options.RecordsToSkip;
        var end = start + options.RecordsToTake;
        var arr = this.data.slice(start, end);
        callback({
            Data: arr ,
            TotalRecords: this.data().length,
            DisplayedRecords: this.data().length
        });      
        this.errors = ko.validation.group(this);
        this.errors.showAllMessages();
    },
    load: function() {
        var arr = [];
        for(var i = 0; i < Math.floor((Math.random()*90)+50); i++) { 
            var index = Math.floor((Math.random()*4));      
            var option = index > 2 ? null : this.options[index];
            arr.push(new ChildViewModel(option ));
        }
        this.data(arr);
    }
}
    
ChildViewModel = function(option) {
    this.selectedOption = ko.observable(option)
        .extend({ required: true });
    
    this.text =  ko.observable().extend({ required: true });
}    
    
OptionViewModel = function(option) {
    this.option = ko.observable(option);
}    
    
ko.applyBindings(new ViewModel());