JSFiddle - React, Tailwind, and code Playground

by db_dev

HTML

<table>
    <tbody data-bind="foreach: Items">
	<!-- ko foreach: Timesheets -->
        <tr>
          <td><input type="checkbox" class="entity-id"/></td>
          <!-- ko if: $parent.Timesheets()[0] == $data -->
          <td data-bind="text: $parent.EmployeeName, attr: { rowspan: $parent.Timesheets().length }"></td>
            <!-- /ko -->
          <td><input type="text" class="span6" data-bind="value: SundayHours"/></td>
          <td><input type="text" class="span6" data-bind="value: MondayHours" /></td>
          <td><input type="text" class="span6" data-bind="value: TuesdayHours"/></td>
          <td><input type="text" class="span6" data-bind="value: WednesdayHours"/></td>
          <td><input type="text" class="span6" data-bind="value: ThursdayHours"/></td>
          <td><input type="text" class="span6" data-bind="value: FridayHours"/></td>
          <td><input type="text" class="span6" data-bind="value: SaturdayHours"/></td>
		</tr>
	<!-- /ko -->
    </tbody>
</table>

CSS

input { width: 3em; }
td { border: 1px solid gray; padding: 0.5em; }
table { border-collapse: collapse; }

JavaScript

var sheet = function() {
    this.SundayHours = ko.observable(0);
    this.MondayHours = ko.observable(0);
    this.TuesdayHours = ko.observable(0);
    this.WednesdayHours = ko.observable(0);
    this.ThursdayHours = ko.observable(0);
    this.FridayHours = ko.observable(0);
    this.SaturdayHours = ko.observable(0);
};

var employee = function() {
    this.EmployeeName = ko.observable("John Doe");
    this.Timesheets = ko.observableArray([new sheet(), new sheet(), new sheet()]);
};

var vm = {
    Items : [new employee(), new employee(), new employee()]
};

ko.applyBindings(vm);