JSFiddle - React, Tailwind, and code Playground

by tgriley1

HTML

<table>
    <thead>
        <tr>
            <th>&nbsp;</th>
            <!-- ko foreach: Options -->
            <th data-bind="text: Name"></th>
            <!-- /ko -->
        </tr>
    </thead>
    <tbody>
        <!-- ko foreach: OptionRows -->
        <tr>
            <td data-bind="text: Name"></td>
            <!-- ko foreach: OptionColumns -->
            <td data-bind="text: Id"></td>
            <!-- /ko -->
        </tr>
        <!-- /ko -->
    </tbody>
</table>

JavaScript

var PageViewModel = function () {  
    this.Options = ko.observableArray([]);
    this.Options.push(new OptionViewModel('1','Option 1'));
    this.Options.push(new OptionViewModel('2','Option 2'));

    this.OptionRows = ko.observableArray([]);
    for(var i = 0; i < Options().length; i++)
    {
        this.OptionRows.push(new OptionRowViewModel(Options[i], Options));
    }
}

var OptionViewModel = function (Id, Name) {  
    this.Id = ko.observable(Id);
    this.Name = ko.observable(Name);
}
                        
var OptionRowViewModel = function (CurrentOption, AllOptions) {  
    this.Id = ko.observable(CurrentOption.Id());
    this.Name = ko.observable(CurrentOption.Name());
    this.OptionColumns = ko.observableArray([]);
    
    for(var i = 0; i < AllOptions().length; i++)
    {
        self.OptionColumns.push(new OptionColumnViewModel(AllOptions[i].Id, AllOptions[i].Name));
    }
}

var OptionColumnViewModel = function (Id, Name) {  
    this.Id = ko.observable(Id);
    this.Name = ko.observable(Name);
}

ko.applyBindings(new PageViewModel());