JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<table>
    <thead>
        <th class="checkbox_th"/>
        <th class="name_th" align="left">Sample</th>
        <th class="status_th" align="left">Status</th>
    </thead>
    <tbody data-bind="template: {name: 'sampleRowTemplate', foreach: samples}"></tbody>
    
<script type="text/x-jquery-tmpl" id="sampleRowTemplate">
    <tr>
        <td><input type="checkbox" name="select_sample" data-bind="checked: is_checked"/></td>
        <td><span data-bind='text: sample_name'/>   The checkbox =<span data-bind="text:is_checked"/></td>
        <td><span data-bind='text: ""'/><td/>
        </tr>
            <tr><td colspan="3">
                <table data-bind='template: { name: "sampleChildRowTemplate", foreach: sample_runs}'> </table>    
                </td></tr>
        </table>            
</script>

<script type="text/x-jquery-tmpl" id="sampleChildRowTemplate">
    
    <tr>
        <td></td>
        <td><span data-bind='text: name'/></td>
        <td>&nbsp;<span data-bind='text: status'/></td>
    </tr>
    
</script>

CSS

td { border: red 1px solid }

JavaScript

var mapping = {
    'samples': {
        key: function(item) {
            return ko.utils.unwrapObservable(item.id);
        },
        'sample_runs': {
            key: function(item) {
                return ko.utils.unwrapObservable(item.id);
            }
        }
    }
};

var data = {};
data.samples = [{
    id: "s1",
    sample_name: "AR008",
    is_checked: false,
    sample_runs: [
        {
        id: "rs1",
        name: "run1",
        status: "done"}]}];
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);

// update the data every 2 seconds
var i = 0;
setInterval(function() {
    var data = {};
    data.samples = [{
        id: "s1",
        sample_name: "AR008" + i,
        sample_runs: [
            {
            id: "rs1",
            name: "run" + i,
            status: "done" + i}]}];
    // is this right? updateFromJS is deprecated
    viewModel = ko.mapping.fromJS(data, viewModel);
    i++;
}, 2000);