JSFiddle - React, Tailwind, and code Playground

by Jimmy Chandra

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<table>
    <thead>
        <tr>
            <th class="description">Description</th>
            <th class="tx">Account</th>
            <th class="qty right">Quantity</th>
            <th class="upet right">UPET</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:lines">
        <tr class="lineItem">
            <td class="description" data-bind="click:descclick"><span data-bind="text:description"></span></td>
            <td class="tx"><span data-bind="text:$parent.accountName(txid)"></span></td>
            <td class="qty right"><span data-bind="text:qty"></span></td>
            <td class="upet right"><span data-bind="text:upet"></span></td>
        </tr>
    </tbody>
</table>

<div style='position:absolute;z-index:10000' id='ce_description'>
    <input type="text"  />
</div>

CSS

.lineItem {
   text-align:left;
}

.description {
    width:200px;text-align:left
}

.qty {
    width:80px;
}

.tx {
    width:100px;text-align:left
}

.upet {
    width:100px
}

.right { text-align:right; }
}

JavaScript

(function() {
    var line = function(desc, txid, qty, upet) {
        var self = this;
        self.description = ko.observable(desc);
        self.txid = ko.observable(txid);
        self.qty = ko.observable(qty);
        self.upet = ko.observable(upet);
        
        self.descclick = function(data, event) {
            $(event.target).html("<input type='text' value='" + data.description() + "'>");
        }
    };

    var model = function() {
        var self = this;

        self.accountName = function(id) {
            var txid = id();
            var a = _.find(self.txAccounts(), function(t) { return t.txid === txid; });
            return (a !== undefined) ? a.name : 'Unknown';
        };
      
        self.txAccounts = ko.observable([
            { txid: '5', name: 'clothing upper' },
            { txid: '6', name: 'clothing lower' }
        ]);
        
        self.lines = ko.observableArray([
            new line ('t-shirt', '5', 1.0, 10.0),
            new line ('jeans', '6', 1.0, 15.0)
        ]);
    };
    
    ko.applyBindings(new model());
}());