JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js "></script>
<script type="text/html" id="employee-template">
    <tr>
    	<td >Cell 1</td>
      <td >Cell 2</td>
      <td >Cell 3</td>
    </tr>
</script>
<table id="passengerGrid" class="table table-bordered table-condensed table-hover table-striped">
  <thead>
    <tr>
        <th>Passenger name</th><th>Meal</th><th>Surcharge</th>
    </tr>
  </thead>
    <!-- Todo: Generate table body -->
    <tbody data-bind="template: { name: 'employee-template' }"> 
    </tbody>
</table>

CSS

.table > * {
  font-family: Arial;
  font-size: 10px;
}

JavaScript

// knockout
var data = '[\
	{ "mealName": "Standard (sandwich)", "price": "0" },\
	{ "mealName": "Premium (lobster)", "price": "34.95" },\
	{ "mealName": "Ultimate (whole zebra)", "price": "290" }\
]';
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}

// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = ko.utils.parseJson(data);
    
    // Editable data
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);
}

ko.applyBindings(new ReservationsViewModel());