JSFiddle - React, Tailwind, and code Playground

by Bruno Augusto

HTML

<script src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
    <script id="query-tabular-output-template" type="text/x-handlebars-template">
    {{#if id}}
        {{#each_with_index sets}}
        <div class="set" id="set_{{index}}">
            {{#if this.RESULTS.DATA.length}}
                <table class="results table table-bordered table-striped">
                    <tr>
                    {{#each this.RESULTS.COLUMNS}}
                    <th>{{this}}</th>
                    {{/each}}
                    </tr>
                    {{#each this.RESULTS.DATA}}
                    <tr>
                        {{#each this}}
                        <td>{{result_display this this}}</td>
                        {{/each}}
                    </tr>
                    {{/each}}
                </table>
            {{/if}}
            <hr>
        </div>
        {{/each_with_index}}
    {{/if}}
</script>    

<div id="outputWrapper"></div>

CSS

td,th {
padding: 5px;        
}
th {
 font-weight: bold;   
}

JavaScript

$( document ).ready( function() {

    var compiledOutputTemplate = Handlebars.compile($("#query-tabular-output-template").html());
    
        $.getJSON(

            "http://sqlfiddle.com/index.cfm/fiddles/loadContent", 

            { fragment: "!2/40ff9/1" },
            
            function( data ) {
                
                $("#outputWrapper").html(
                    compiledOutputTemplate( data )
                );        
            });
});

// @see: http://stackoverflow.com/a/12397958/753531

Handlebars.registerHelper("each_with_index", function(array, fn) {
        var buffer = "";
        k=0;
        for (var i = 0, j = array.length; i < j; i++) {
            if (array[i])
            {
                var item = array[i];

                // stick an index property onto the item, starting with 0
                item.index = k;

                item.first = (k == 0);
                item.last = (k == array.length);

                // show the inside of the block
                buffer += fn(item);

                k++;
            }
        }

        // return the finished buffer
        return buffer;

    });        
    
    Handlebars.registerHelper("result_display", function(value) {
        // thanks to John Gruber for this regexp http://daringfireball.net/2010/07/improved_regex_for_matching_urls
        // also to "Searls" for his port to JS https://gist.github.com/1033143
        var urlRegexp = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?ÇÈÒÓÔÕ]))/ig;

        if ($.isPlainObject(value))
            return JSON.stringify(value);
        else if (value == null)
            return "(null)";
        else if (value === false)
            return "false";
        else if (typeof value === "string" && value.match(urlRegexp) && Handlebars.Utils.escapeExpression(value) == value)
            return new...