JSFiddle - React, Tailwind, and code Playground

by Wouter Vos

HTML

<div>
    <ul data-bind="foreach: users()" class="unstyled">
        <li class="lii">
            <input type="checkbox" name="cbfilter" data-bind="checked: userselected"
            /> <span data-bind="text: username + ' ' + usersurname"></span>

        </li>
    </ul>
</div>
<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">
              <!-- The table row number -->
              <td data-bind="if: $index() === 0">
                <div data-bind="text: ($parent.$index() + 1)"></div>
              </td>
              <td data-bind="text: $data"></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);
 });