JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="https://rawgit.com/anywhichway/csxjs/master/cst.js"></script>
<main></main>

<script id='template' type='text/html'>
    <Grid rows='{{model.people}}' columns='["name","age"]'/>
</script>

<script id='grid' type='text/html'>
    <div class='grid'>
        {{#each rows :i}}
            <GridRow row='{{this}}' columns='{{columns}}'/>
        {{/each}}
    </div>
</script>

<script id='grid-row' type='text/html'>
    {{#each columns}}
        <input value='{{row[this]}}'/>
    {{/each}}
</script>

CSS

.grid { border: 1 }
span.gridRow { border: 1}

JavaScript

Ractive.components.Grid = Ractive.extend({ template: '#grid' });
Ractive.components.GridRow = Ractive.extend({ template: '#grid-row' });

var ractive = new Ractive({
    el: "main",
    template: '#template'
});

ractive.set("model.people",[
    {name:"Joe", age: 25},
    {name:"Bill", age: "15"},
    {name: "Mary", age:50}
]);