JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script>
var require = {
paths: {
"jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min",
"knockout": "//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min",
"mapping": "//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping"
},
deps: ['jquery', 'knockout', 'mapping', 'orderable'],
callback: function ($, ko, mapping) {
ko.mapping = mapping;
vm = mapping.fromJS({
people: [
{firstName: "Mike", lastName: "Smith", age: 34},
{firstName: "Ben", lastName: "Miller", age: 18},
{firstName: "Rebecca", lastName: "Abbarno", age: 25},
]
});
//ko.bindingHandlers.module.baseDir = "";
ko.applyBindings(vm);
}
};
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js"></script>
<script>
define("orderable", ["knockout", "mapping", "jquery"], function(ko) {
ko.bindingHandlers.orderable = {
getProperty: function(o, s) {
// copied from http://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key
s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
s = s.replace(/^\./, ''); // strip a leading dot
var a = s.split('.');
while (a.length) {
var n = a.shift();
if (n in o) {
o = o[n];
} else {
return;
}
}
return o;
},
compare: function (left, right) {
if (typeof left === 'string' || typeof right === 'string') {
return left ? left.localeCompare(right) : 1;
}
...
CSS
.table {
width: 400px;
}
th a {
display: block;
}
.desc {
background: #aee;
}
.asc {
background: #eaa;
}