JSFiddle - React, Tailwind, and code Playground

by Wouter Vos

HTML

<script src="http://knockoutjs.com/js/knockout-2.2.0.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div>
    <table class="table table-bordered">
        <thead>
            <th>#</th>
            <th>User Name</th>
            <th>User Surname</th>
        </thead>
        <tbody data-bind="foreach: users">
            <tr data-bind="foreach: values">
              <td data-bind="visible: $index() === 0">
                <div data-bind="text: ($index() + 1)"></div>
              </td>
              <!-- The table row number -->
              <td data-bind="text: $value"></td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var myViewModel = {
     users: ko.observableArray([{
     	values: ko.observableArray('Name 1', 'Surname 1', ko.observable(false))
     }, {
     	values: ko.observableArray('Name 2', 'Surname 2', ko.observable(false))
     }, {
     	values: ko.observableArray('Name 3', 'Surname 3', ko.observable(false))
     }])
 };

 $(document).ready(function () {
     //Bind View model
     ko.applyBindings(myViewModel);
 });