JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<table class="table1" >

   <thead>

       <tr>
           <th></th>
           <th>Descricao</th>
           <th>simbolo</th>
           <th></th>
        </tr>
   </thead>
   <tbody data-bind=" template:{name: templateToUse, foreach:pagedRows }">
 </tbody>
</table>
<script id="itemTmpl" type="text/html">
   <tr>
    <td><input type="checkbox" data-bind="checked: markedForDelete"/></td>
    <td data-bind="text: descricao"></td>
    <td data-bind="text: simbolo"></td>
    <td>
        <button data-bind="click: $root.editItem">Edit</button>
        <!--button data-bind="click: $root.deleteItem">Delete</button-->
    </td>
    </tr>
   </script>
   <div class="tableItems">
       <button data-bind="click: showForm, visible:displayButton">Create New</button>
       <button data-bind="click: deleteMarkedItem, enable:isAtLeastOneSelected">Delete</button>
       <button data-bind="click: save">Save</button>
            <a href="#" data-bind="click: previousPage, visible: pageIndex()>0">Previous</a>
            <a href="#" data-bind="click: nextPage, visible: pageIndex()< maxPageIndex()">Next</a>
       <fieldset data-bind="visible: displayForm">
                <div class="details">
                    <label>Descricao: <input data-bind="value: newDescricao" /></label>
                    <label>Simbolo: <input data-bind="value: newSimbolo"/></label>
                </div>
                <div class="tools">
                    <button data-bind="click: addItem">Add</button>
                    <button data-bind="click: hideForm">Cancel</button>
                </div>
             </fieldset>
        </div>  
 <script id="editTmpl" type="text/html">
   <tr>
       <td><input data-bind="value: descricao"/></td>
       <td><input data-bind="value: simbolo"/></td>
    <td>
        <button data-bind="click: $root.acceptItemEdit">Save</button>
        <button...

CSS

.table1{
    border-collapse: collapse;
    border:1px solid #868585;
    
}
td{
    width:130px;
}
th{
    background-color: #CEEBF6;
}
tbody{
    background-color: #D8D8D8;
}
.details{
    width:320px;
    margin-right: 56px;
    
}
.tools { 
        width:100%;
        padding-top:10px; 
        border-top:1px dotted #868585;
        margin-top:10px; 
        float:left; 
        clear:both;
}
#tableItems{
    
    margin: auto;
}
fieldset {
    padding:10px;
    border:1px solid #868585; 
    float:none; 
    clear:left;
    background-color:#eaeaea;
}
label { 
    display:block;
    margin-bottom:10px;
    clear:both;
}
fieldset button { 
    clear:both; 
}
input{
    width:130px;
    float:right;
}
fieldset { margin:1px;
           float:left; 
           color:#555; 
         }

JavaScript

ko.protectedObservable = function(initialValue) {
    //private variables
    var _temp = initialValue;
    var _actual = ko.observable(initialValue);

    var result = ko.computed({
        read: _actual,
        write: function(newValue) {
            _temp = newValue;
        }
    });
    //commit the temporary value to the observale, if is different
    result.commit = function() {
        if (_temp !== _actual()) {
            _actual(_temp);
        }
    };
    //notify subscribers to update their values with the original
    result.reset = function() {
        _actual.valueHasMutated();
        _temp = _actual();
    };
    return result;
};

function Item(data) {
    this.descricao = ko.protectedObservable(data.descricao);
    this.simbolo = ko.protectedObservable(data.simbolo);
    this.markedForDelete= ko.observable(false);
}

function UnidadeViewModel() {
    var self = this;
    this.tableItems = ko.observableArray();
    this.newDescricao = ko.observable();
    this.newSimbolo = ko.observable();
    
    
    this.selectedItem = ko.observable();

    this.editItem = function(tableItem) {
        self.selectedItem(tableItem);
    };

    this.acceptItemEdit = function() {
        var item = self.selectedItem();
        for (var prop in item) {
            if (typeof item[prop].commit === "function") {
                item[prop].commit();
            }
        }
        
        self.selectedItem(null);
    };

    this.cancelItemEdit = function() {
        var item = self.selectedItem();
        for (var prop in item) {
            if (typeof item[prop].reset === "function") {
                item[prop].reset();
            }
        }
        self.selectedItem(null);
    };

    this.templateToUse = function(tableItem) {
        return self.selectedItem() === tableItem ? "editTmpl" : "itemTmpl";
    };
     this.displayForm = ko.observable(false);
     this.displayButton = ko.observable(true);
     
     this.showForm=function(){
     ...