JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/blob/master/build/output/knockout.mapping-latest.debug.js"></script>
<div>
    Display: <span data-bind="text: $root.model.CurrentDisplayThing().ID"></span>
</div>
<table class="defaultGrid">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: model.Things">
            <tr data-bind="click: $root.selectThing ">
                <td data-bind="text: ID"></td>
                <td data-bind="text: Name"></td>
            </tr>
        </tbody>
     </table>

JavaScript

$(function()
  {
    function viewModel() {
        var self = this;
        self.model = {};
        self.model.Things = ko.observableArray([
            { ID: 1, Name: "Thing 1" },
            { ID: 2, Name: "Thing 2" },
            { ID: 3, Name: "Thing 3" }
        ]);
        self.model.CurrentDisplayThing = ko.observable(self.model.Things()[0]);
        self.selectThing = function(item) {
            $.extend(self.model.CurrentDisplayThing, item);
            alert(self.model.CurrentDisplayThing.ID + '-' + item.ID);
        };
    }
    ko.applyBindings(new viewModel());
  });