JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<table border="1" >
           <thead>
                <tr>
                    <th>
                        Name
                    </th>
  
                    <th>
                        Attendees
                    </th>
                    <th>
                       Amount
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: model">
                <tr>
                    <td>
                        <span data-bind="text:Name "></span>
                    </td>
 
                     <td>
                        <span data-bind="text:Attendee "></span>
                    </td>
                    <td>
                        <span data-bind="text:Amount "></span>
                    </td>
                </tr>
            </tbody>
          <tfoot>
                <tr>
                    <td>Total
                    </td>
                     <td>
                    </td>
                     <td data-bind="text: total">
                    </td>
                </tr>
            </tfoot>
</table>

CSS

h1 { font-weight: bold; }

JavaScript

var PaidPeople = function(data) {
    var self = this;
    ko.mapping.fromJS(data, {}, this);
   
}

var PayinyVM = function (data) {
                var self = this;

ko.mapping.fromJS(data, {
                    'model' : {
                        create: function(options) {
                            return new PaidPeople(options.data);
                    }                        
                  }
                }, self);
self.total = ko.computed(function(){
    var total = 0;
    for(var p = 0; p < self.model().length; ++p)
    {
        total += self.model()[p].Amount();
    }
    return total;
});
            };

var data = {model:[{__type: "PaidPeople:#model", Amount:110, Attendee:1, Name:'John'}, {__type: "PaidPeople:#model", Amount:210, Attendee:2, Name:'Alan'}]};

ko.applyBindings(new PayinyVM(data));