JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<main></main>

<script id='template' type='text/ractive'>
    {{#each sortedRows :iRow}}
        {{#if !filterRow(.) }}
            <tr data-order="{{.priority}}" data-id="{{iRow}}">
                {{#each columns}}
                <td>
                    {{#if sortedRows[iRow][fieldName]}}            
                        {{sortedRows[iRow][fieldName]}}
                    {{/if}}
                </td>
                {{/each}}
            </tr>
        {{/if}}
    {{/each}}
</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 ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        rows: [
            { priority: 2, visible: true,  foo: 'a', bar: 'b', baz: 'c' },
            { priority: 4, visible: true,  foo: 'd', bar: 'e', baz: 'f' },
            { priority: 3, visible: false, foo: 'g', bar: 'h', baz: 'i' },
            { priority: 1, visible: true,  foo: 'j', baz: 'k' }
        ],
        columns: [
            { fieldName: 'foo' },
            { fieldName: 'bar' },
            { fieldName: 'baz' }
        ],
        filterRow: function ( row ) {
            return !row.visible;
        }
    },
    computed: {
        sortedRows: function () {
            // we slice the data so we don't mutate the original array
            return this.get( 'rows' ).slice().sort( byPriority );
        }
    }
});

function byPriority ( a, b ) {
    return a.priority - b.priority;
}