JSFiddle - React, Tailwind, and code Playground

by dandoyon

HTML

<script type="text/javascript" ng:autobind
src="http://docs-next.angularjs.org/angular-0.10.5.min.js"></script>
<script>    
// I had to put widget up here because jsFiddle crimped about angular not existing...
    
angular.widget('my:colhdg', function(compileElement) {

    // this part of the widget gets called just once 
    // assign css style to "new" DOM element
    var compiler = this;
    compileElement.css({
        'display': 'inline',
        'cursor': 'pointer'
    });

    var hdgAttr = compileElement.attr('text'); // hdg text
    
    // below is function factory to create element
    return function(linkElement) {
        var currentScope = this;

        // create child elements using value in hdgAttr
        var hdgSpan = angular.element('<span>' + currentScope[hdgAttr] + '</span>');

        // append child element to the template       
        linkElement.append(hdgSpan);

        // click will be called for the one column that was clicked,
        // changing the parent scope's 'selected' column will trigger the watch
        // for all columns, this will facillitate resetting the other columns to not have css class
        linkElement.bind('click', function(event) {
                if (!currentScope.$parent.selected || 
                        currentScope.$parent.selected != currentScope.col) {
                // this column is newly clicked
                currentScope.$parent.selected = currentScope.col;
                currentScope.$parent.reverse = false;
                hdgSpan.addClass('asc');
            } else {
                // this column was clicked before, so change its direction
                currentScope.$parent.reverse = !currentScope.$parent.reverse;
            }
            currentScope.$parent.$digest(); // update view
            event.stopPropagation(); // don't let anyone else do anything with even
        });

        this.$watch('selected', function(scope, newVal, oldVal) {
            if (scope.col !== newVal)...

CSS

td { padding: 0.2em 1em; }
th { text-align: center; }
th span { padding-right: 2px; } /* gap so asc/desc images are not flush */
thead {
    border-bottom: 2px solid black; 
    cursor: pointer;  
}

/* http://www.greywyvern.com/code/php/binary2base64 */

th {
    min-width: 100px;
    text-align: center;
}
span.desc:after {
     content:...

JavaScript

function SortableTableCtrl() {
    var scope = this;
    // defaults
    scope.reverse = false;
    scope.selected = 'a';

    // model
    scope.head = {
        a: "Name",
        b: "Surname",
        c: "City"
    };
    scope.body = [
        {
        a: "Hans",
        b: "Mueller",
        c: "Leipzig"},
    {
        a: "Dieter",
        b: "Zumpe",
        c: "Berlin"},
    {
        a: "Bernd",
        b: "Danau",
        c: "Muenchen"}
    ];
}