JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<div id="fooCol" class="wrap"></div>
<div id="fooRow" class="wrap"></div>

<script type="text/handlebars" id="colTemplate">
<h1>Data</h1>
{{#each id}}
	<p>{{this}} is {{../age.[@index]}} years old with a value of {{../value.[@index]}}</p>
{{/each}}
</script>

CSS

.wrap { border: 1px solid black; padding: 1em; }

JavaScript

var rowData = [], 
    colData = { id: [], age: [], value: [] },
    i, j, ob;

for (i=0; i < 1e2; i++) {
    ob = {
        id: Math.floor(Math.random() * 1e7),
        age: Math.floor(Math.random() * 100),
        value: Math.floor(Math.random() * 1e4) / 100
    }
    colData.id[i] = ob.id;
    colData.age[i] = ob.age;
    colData.value[i] = ob.value;
    rowData.push(ob);
}

// HB wrapper object
var foo = {rowData: rowData};

(function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['template'] = template({"1":function(depth0,helpers,partials,data) {
  var helper, functionType="function", escapeExpression=this.escapeExpression;
  return "\n	<p>\n		"
    + escapeExpression(((helper = helpers.id || (depth0 && depth0.id)),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
    + " is "
    + escapeExpression(((helper = helpers.age || (depth0 && depth0.age)),(typeof helper === functionType ? helper.call(depth0, {"name":"age","hash":{},"data":data}) : helper)))
    + " years old with a value of "
    + escapeExpression(((helper = helpers.value || (depth0 && depth0.value)),(typeof helper === functionType ? helper.call(depth0, {"name":"value","hash":{},"data":data}) : helper)))
    + "\n	</p>\n";
},"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {
  var stack1, buffer = "<h1>Data</h1>\n";
  stack1 = helpers.each.call(depth0, (depth0 && depth0.rowData), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
  if(stack1 || stack1 === 0) { buffer += stack1; }
  return buffer + "\n";
},"useData":true});
})();

var colTmpl = Handlebars.compile($('#colTemplate').html());

$('#fooRow').html(Handlebars.templates.template(foo));
$('#fooCol').html(colTmpl(colData));