JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/jquery.dataTables.js"></script>
<table class="table table-striped table-bordered bootstrap-datatable datatable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>   
    <tbody data-bind="foreach: groupMembers">
        <tr>
        <td><a data-bind="click: $parent.gotoPersonLink, text: name" /></td>
        <td><button data-bind="click: $parent.removeMember"><i class="icon-remove" /></button></td>
        </tr>
    </tbody>
</table>

JavaScript

/* Object code */
function GroupMember(id, name, isGroupLeader) {
    var self = this;
    self.id = id;
    self.name = name;
    self.isGroupLeader = ko.observable(isGroupLeader);
}

/* View model */
function groupViewModel() {
    var self=this;
    self.groupMembers = ko.observableArray([
        new GroupMember("1", "Abe", true),
        new GroupMember("2", "Bob", false),
        new GroupMember("3", "Bill", false)]);

    self.removeMember = function (member) {
        self.groupMembers.remove(member);
    };
    
    self.gotoPersonLink = function (member) {
        alert('add your change window logic here');    
    };
};

ko.applyBindings(new groupViewModel());