JSFiddle - React, Tailwind, and code Playground

by jhorvath

HTML

A
<table id="tbl">
    <thead data-bind="foreach: columns">
        <th><span data-bind="text: title"></span></th>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr data-bind="foreach: cells">
            <td><span data-bind="text: value"></span></td>
        </tr>
    </tbody>
</table>
b

CSS

#tbl{
    border: 1px solid black;
}

JavaScript

var ns = (function(ns){
    ns.GridColumn = (function(){
        function gridColumn(title) {
            this.title = ko.observable(title);
        }
        
        gridColumn.prototype = {
        
        };
        
        return gridColumn;
    })();
    
     ns.GridCell = (function(){
        function gridCell() {
            this.value = ko.observable();
        }
        
        gridCell.prototype = {
        
        };
        
        return gridCell;
    })();
    
    ns.GridRow = (function(){
        function gridRow(cells) {
            this.cells = ko.observableArray(cells || []);
        }
        
        gridRow.prototype = {
        
        };
        
        return gridrow;
    })();
    
    ns.Grid = (function(){
        function grid() {
            this.columns = ko.observableArray([]);
            this.rows = ko.observableArray([]);
        }
        
        grid.prototype = {
        
        };
        
        return grid;
    })();
    
    return ns;
})(ns || {});

var grid = new ns.Grid();
grid.columns().push(new ns.GridColumn("Column A"));
grid.columns().push(new ns.GridColumn("Column B"));
grid.columns().push(new ns.GridColumn("Column C"));

grid.rows.push(new ns.GridRow([new ns.GridCell("a"), new ns.GridCell("a"),new ns.GridCell("a")]));

ko.applyBindings(grid, document.getElementById("tbl"));