JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<a href="#" data-bind="click: AddUser">Add User</a>

<table class="table table-hover table-bordered table-striped">
    <thead>
        <tr>
           <th>First Name <i></i></th>
           <th class="{sorter: false}">Actions</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Users">
        <tr>
            <td data-bind="text: FirstName"></td>
            <td>
                <div class="btn-group">
                    <a class="btn dropdown-toggle btn-warning" data-toggle="dropdown" href="#">Actions <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a data-bind="attr: { href: '/Users/Summary?userId=' + ID() }"><i class="icon-edit"></i> Edit</a></li>
                        <li class="divider"></li>
                        <li><a class="delete" href="#deleteUserDialog" data-toggle="modal" data-bind="attr: { 'data-id': ID }"><i class="icon-trash"></i> Delete</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

var UsersModel = function(args) {
    var self = ko.mapping.fromJS(args.model);
    
    self.AddUser = function(data, e) {
        self.Users.push({
            "ID": 3,
            "FirstName": "Alex"
        });
    };
    
    ko.applyBindings(self);
}

var viewModel = new UsersModel({
    model: {
        "Users": [
            {
            "ID": 1,
            "FirstName": "Joe"},
        {
            "ID": 2,
            "FirstName": "Bob"}
        ]
    }
});