JSFiddle - React, Tailwind, and code Playground

by Sybeus

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.9.4/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.9.4/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<table id="tblSelected" class="table table-striped table-condensed">
	<thead>
		<tr>
			<th>Item</th>
			<th></th>
		</tr>
	</thead>
	<!-- ko ifnot: selected().length > 0 -->
	<tbody>
		<tr>
			<td colspan="2" class="dataTables_empty">None</td>
		</tr>
	</tbody>
	<!-- /ko -->
	<!-- ko if: selected().length > 0 -->
	<tbody data-bind="foreach: selected">
		<tr>
			<td data-bind="text: name"></td>
            <td><button type="button" class="btn btn-default btn-xs pull-right" data-bind="click: $parent.removeSelected"><span class="glyphicon glyphicon-minus"></span> Remove</button></td>
		</tr>
	</tbody>
	<!-- /ko -->
</table>
<p>
    <div class="input-group">
        <input type="textbox" class="form-control" placeholder="Name" data-bind="value: newName"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-primary" data-bind="click: addSelected"><span class="glyphicon glyphicon-plus"></span> Add</button>
        </span>
    </div>
</p>

CSS

div.dataTables_length label {
	font-weight: normal;
	float: left;
	text-align: left;
	margin: 0px;
}

div.dataTables_length select {
	width: 75px;
}

div.dataTables_filter label {
	font-weight: normal;
	float: right;
	margin: 0px;
}

div.dataTables_filter input {
	width: 16em;
}

div.dataTables_info {
	padding-top: 6px;
}

div.dataTables_paginate {
	float: right;
	margin: 0;
}

div.dataTables_paginate ul.pagination {
	margin: 0px;
}

table.dataTable,
table.dataTable td,
table.dataTable th {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}


table.dataTable {
	clear: both;
	max-width: none !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
	cursor: pointer;
}

table.dataTable thead .sorting { background: url('http://cdn.datatables.net/1.9.4/images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc { background: url('http://cdn.datatables.net/1.9.4/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc { background: url('http://cdn.datatables.net/1.9.4/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled { background: url('http://cdn.datatables.net/1.9.4/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled { background: url('http://cdn.datatables.net/1.9.4/images/sort_desc_disabled.png') no-repeat center right; }

table.dataTable th:active {
	outline: none;
}

/* Scrolling */
div.dataTables_scrollHead table {
	margin-bottom: 0 !important;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

div.dataTables_scrollHead table thead tr:last-child th:first-child,
div.dataTables_scrollHead table thead tr:last-child td:first-child {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0...

JavaScript

/* BEGIN dataTables.bootstrap.js */
/* Set the defaults for DataTables initialisation */
$.extend($.fn.dataTable.defaults, {
    "sDom": "<'panel panel-default'<'panel-heading'<'row'<'col-sm-4 col-xs-12'l><'col-sm-4 col-xs-12'r><'col-sm-4 col-xs-12'f>>>t<'panel-footer'<'row'<'col-sm-6 col-xs-12'i><'col-sm-6 col-xs-12'p>>>>",
    "sPaginationType": "bootstrap",
    "bProcessing": true,
    "aLengthMenu": [[25, 50, 100], [25, 50, 100]],
    "iDisplayLength": 25,
    "aaSorting": []
});

/* Default class modification */
$.extend($.fn.dataTableExt.oStdClasses, {
    "sWrapper": "dataTables_wrapper form-inline",
    "sFilterInput": "form-control input-sm",
    "sLengthSelect": "form-control input-sm"
});

/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
    return {
        "iStart": oSettings._iDisplayStart,
        "iEnd": oSettings.fnDisplayEnd(),
        "iLength": oSettings._iDisplayLength,
        "iTotal": oSettings.fnRecordsTotal(),
        "iFilteredTotal": oSettings.fnRecordsDisplay(),
        "iPage": oSettings._iDisplayLength === -1 ?
			0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
        "iTotalPages": oSettings._iDisplayLength === -1 ?
			0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
    };
};

/* Bootstrap style pagination control */
$.extend($.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function (oSettings, nPaging, fnDraw) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function (e) {
                e.preventDefault();
                if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
                    fnDraw(oSettings);
                }
            };

            $(nPaging).append(
				'<ul class="pagination pagination-sm">' +
					'<li class="arrowpaging first disabled"><a href="#">' + oLang.sFirst + '</a></li>' +
					'<li class="arrowpaging prev disabled"><a...