JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<table border="1">
    <thead>
        <tr>
            <th>
            col1
            </th>
            <th>
            col2
            </th>
             <th>
            sum
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach:rows">
        <tr>
            <td>
                 <input data-bind="value: column1"/> 
            </td>
             <td>
                 <input data-bind="value: column2"/>
            </td>
             <td data-bind="text: sum">
                 
            </td>
        </tr>
    </tbody>
</table>

JavaScript

var Row = function(col1, col2)
{
    var self = this;
    
    self.column1 = ko.observable(col1);
    self.column2 = ko.observable(col2);
    self.sum = ko.computed(function(){
        var col1 = isNaN(parseInt(self.column1())) ? 0 : parseInt(self.column1());
        var col2 = isNaN(parseInt(self.column2())) ? 0 : parseInt(self.column2());
       
        return col1 + col2;
    });
}


var RowViewModel = function()
{
    this.rows = ko.observableArray([
        new Row(10, 20),
        new Row(10, 20)
    ]);
}

 ko.applyBindings(new RowViewModel);