JSFiddle - React, Tailwind, and code Playground

Knockout DataTables 1.10

by Sybeus

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<table id="tblSelected" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Gender</th>
            <th>Image</th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<script type="text/html" id="tblSelected_rowTemplate">
    <td data-bind="text: displayName"></td>
    <td data-bind="text: (isMale ? 'Male' : 'Female')"></td>
    <td><img data-bind = "attr: { src: imageUrl }" /></td>
    <td><button type="button" data-bind="click: remove">Remove</button></td>
</script>

JavaScript

/* BEGIN test data */
// Simulate server side list of item.
var serverData = [{
    "personID": "468c6d00-e5ea-11e3-8e2e-b8ca3ab75681",
        "displayName": "Kurt Roemer",
        "firstName": "Kurt",
        "lastName": "Roemer",
        "isMale": true,
        "imageUrl": "http://www.principalfocus.com/images/unknown.gif",
        "alert": false,
        "doNotContact": false,
        "createdByID": "72aac0fe-f512-46ef-8bc2-a32b01698d67",
        "updatedByID": "72aac0fe-f512-46ef-8bc2-a32b01698d67",
        "createdOn": "2012-08-01 12:00 AM",
        "updatedOn": "2014-05-27 03:00 PM"
}, {
    "personID": "468c6e00-e5ea-11e3-8e2e-b8ca3ab75681",
        "displayName": "James Creamer",
        "firstName": "James",
        "lastName": "Creamer",
        "isMale": true,
        "imageUrl": "http://www.principalfocus.com/images/unknown.gif",
        "alert": false,
        "doNotContact": false,
        "createdByID": "468c6d18-e5ea-11e3-8e2e-b8ca3ab75681",
        "updatedByID": "468c6d18-e5ea-11e3-8e2e-b8ca3ab75681",
        "createdOn": "2004-02-16 12:00 AM",
        "updatedOn": "2009-07-23 11:07 AM"
}, {
    "personID": "468c6d04-e5ea-11e3-8e2e-b8ca3ab75681",
        "displayName": "Sid Agnew",
        "firstName": "Sid",
        "lastName": "Agnew",
        "isMale": true,
        "imageUrl": "http://www.principalfocus.com/images/unknown.gif",
        "alert": false,
        "doNotContact": false,
        "createdByID": "72aac0fe-f512-46ef-8bc2-a32b01698d67",
        "updatedByID": "72aac0fe-f512-46ef-8bc2-a32b01698d67",
        "createdOn": "2010-10-22 12:00 AM",
        "updatedOn": "2014-05-27 03:00 PM"
}, {
    "personID": "468c6f07-e5ea-11e3-8e2e-b8ca3ab75681",
        "displayName": "Robert Aisenbrey",
        "firstName": "Robert",
        "lastName": "Aisenbrey",
        "isMale": true,
        "imageUrl": "http://www.principalfocus.com/images/unknown.gif",
        "alert": false,
        "doNotContact": false,
        "createdByID":...