JSFiddle - React, Tailwind, and code Playground

by xdenser

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<div data-bind="template: { name: 'checkBoxes', foreach: colDefinitions}">
</div>    
<table width=100%>
    <thead>
        <tr data-bind="template:{name:'head', foreach: colDefinitions}">
        </tr>    
    </thead>        
    <tbody data-bind="template:{ name: 'row', foreach: rows, templateOptions: { colDefs: colDefinitions } }" >
    </tbody>
</table>    

<script type='text/html' id='head'>
    <td data-bind="text: caption, visible: visible"></td> 
</script>    
<script type='text/html' id='row'>
    <tr data-bind="template: {name:'field', foreach: $item.colDefs, templateOptions: { row: $data } }"></tr>
</script>    
<script type='text/html' id='field'>
    <td data-bind="text: $item.row[name], visible: visible"></td>
</script>    
<script type='text/html' id='checkBoxes'>
    <span data-bind="text: name"></span><input type='checkbox' data-bind='checked: visible' /><br>
</script>

JavaScript

var Row = function(id, name, description)
    {
        this.id = id;
        this.name = name;
        this.description = description;
    };

var viewModel = {
    rows:[
        new Row(0,'Bar','This is Bar'),
        new Row(1,'Romb','This is Romb')
    ],
    colDefinitions:[
        { 
            name: 'id',
            caption: 'Id',
            visible: ko.observable(true)
        },
        {
            name: 'name',
            caption: 'Name',
            visible: ko.observable(true)
        },
        {
            name: 'description',
            caption: 'Description',
            visible: ko.observable(false)
        }       
    ]    
};
    

ko.applyBindings(viewModel);