JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/ui/style.css">
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/blue/style.css">
<table class="userList" id="list1" class="zebra-striped">
<thead>
<tr>
<th class="header">name</th>
<th class="header">age</th>
<th class="header">action</th>
</tr>
</thead>
<tbody data-bind="template: { name: 'person-template', foreach: activeUsers }">
</tbody>
</table>
<script type="text/html" id="person-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td><input type="checkbox" data-bind="click: $parent.toggleStatus"></td>
</tr>
</script>
CSS
table tr td{
padding: 10px;
}
JavaScript
function User(data) {
var self = this;
this.name = ko.observable(data.name);
this.age = ko.observable(data.age);
this.active = ko.observable(data.active);
}
function UserViewModel() {
/*
* User View Model Data
* */
var self = this;
self.users = ko.observableArray([
new User({
name: "Sidney",
age: 26,
active: 1
}),
new User({
name: "Sidney2",
age: 27,
active: 1
}),
new User({
name: "Sidney3",
age: 28,
active: 1
})
]);
self.activeUsers = ko.computed(function() {
return ko.utils.arrayFilter(self.users(), function(user) {
if (user.active() == 1) {
return true;
} else {
return false;
}
});
});
self.toggleStatus = function(data, event) {
if (data.active() == 0) {
data.active(1);
} else {
data.active(0);
}
}
}
$(function() {
ko.applyBindings(new UserViewModel());
//comment next line to see working example
$("#list1").tablesorter();
});