JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<table>
<thead>
  <tr>
    <th>Day of Week</th>
    <th>Simulator</th>
  </tr>
</thead>
  <!--ko foreach: groupedScheduleDays -->
  <tbody data-bind="foreach: $data">
    <tr>
      <td><span data-bind="text: dayOfWeekName"></span></td>
      <td><span data-bind="text: simulatorId"></span></td>
    </tr>    
  </tbody>
  <!--/ko-->
</table>

CSS

table {
  border: 1px solid black;
}
table td,th {
  padding: 0 6px;
}

JavaScript

var data = [
	[
    { date: '02/09/2020', dayOfWeekName: 'Sunday', simulatorId: 2979 },
    { date: '02/10/2020', dayOfWeekName: 'Monday', simulatorId: 2979 },
    { date: '02/11/2020', dayOfWeekName: 'Tuesday', simulatorId: 2979 },
    { date: '02/12/2020', dayOfWeekName: 'Wednesday', simulatorId: 2979 },
    { date: '02/13/2020', dayOfWeekName: 'Thursday', simulatorId: 2979 },
    { date: '02/14/2020', dayOfWeekName: 'Friday', simulatorId: 2979 },  
    { date: '02/15/2020', dayOfWeekName: 'Saturday', simulatorId: 2979 }
  ],
  [
    { date: '02/09/2020', dayOfWeekName: 'Sunday', simulatorId: 3355 },
    { date: '02/10/2020', dayOfWeekName: 'Monday', simulatorId: 3355 },
    { date: '02/11/2020', dayOfWeekName: 'Tuesday', simulatorId: 3355 },
    { date: '02/12/2020', dayOfWeekName: 'Wednesday', simulatorId: 3355 },
    { date: '02/13/2020', dayOfWeekName: 'Thursday', simulatorId: 3355 },
    { date: '02/14/2020', dayOfWeekName: 'Friday', simulatorId: 3355 },  
    { date: '02/15/2020', dayOfWeekName: 'Saturday', simulatorId: 3355 }
  ]
] 

function viewModel(){
	this.groupedScheduleDays  = ko.computed(function(){
  	return data;
  });
}

ko.applyBindings(new viewModel());