JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="https://raw.github.com/mbest/knockout-repeat/master/knockout-repeat.js"></script>
<table>
    <thead>
        <td></td>
        <th data-bind="repeat: {foreach: cols, item: '$col'}">
            <span data-bind="text: $col"/>
        </th>
    </thead>
    <tbody>
        <tr data-bind="repeat: {foreach: rows, item: '$row'}">
            <th>
                <span data-bind="text: $row"/>
            </td>
            <td data-bind="repeat: {foreach: cols, item: '$col'}">
                <span data-bind="text: '<' + $row() + ', ' + $col() + '>'"/>
            </td>
        </tr>
    </tbody>
</table>

CSS

td {
    border: 1px solid black;
}
th {
    background-color: yellow;
}

JavaScript

function viewModel() {
    var self = this;

    self.rows = [1, 2, 3];
    self.cols = [1, 2, 3];

    self.items = ko.observableArray();

    for (var i = 0; i < self.rows.length; i++) {
        var row = self.rows[i];
        self.items()[row] = ko.observableArray();
        for (var j = 0; j < self.cols.length; j++) {
            var col= self.cols[j];
            self.items()[row]()[col] = '(' + row + ', ' + col + ')';
        }
    }
}

var vm = new viewModel();
ko.applyBindings(vm);

vm.items.push({
    name: 'foo'
});