JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div data-list></div>   
<script id="list-container" type="text/ractive">
    <div>
        <table class="list separate">
            <thead>
                <tr>
                    <th class='sortable {{ sortColumn === animal ? "sorted" : "" }}' on-tap='sort:animal'>
                        <select value='{{selected}}'>
                            {{#each animalTypes}}
                                <option>{{this}}</option>
                            {{/each}}
                        </select>
                    </th>
                </tr>
            </thead>
            <tbody>
                {{#each sort(animals,selected)}}
                    <tr><td>{{this}}</td></tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

.error {
    color: #d00;
    font-family: monospace;
}

JavaScript

var animalTypes = ['Cat', 'Dog', 'Horse', 'Bat'];
var animals = ['Cat', 'Cat', 'Dog', 'Bat', 'Horse', 'Dog', 'Dog', 'Bat', 'Cat' ];

var ractive = new Ractive({
    el: document.querySelector('[data-list]'),
    template: '#list-container',
    data: {
        animalTypes: animalTypes,
        animals: animals,
        sort: function ( array, selected ) {
            return array.slice().sort( function ( a, b ) {
                if ( a === selected ) {
                    return b === selected ? 0 : -1;
                } else if ( b === selected ) {
                    return 1;
                }
            });
        },
        selected: 'Cat'
    }
})