JSFiddle - React, Tailwind, and code Playground

by alkos333

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.debug.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>koSwcGrid</title>
    </head>
    <body>
        <header>
            <hgroup>
                <h1 data-bind="text: name"></h1>
                <h2 data-bind="text: version"></h2>
            </hgroup>
        </header>
        <button id="toggle" >Hide/Show Highlighted Columns</button>
        <table data-swc-grid="true" class="swc-grid">
            <thead>
                <tr data-bind="foreach: columns">
                    <th data-bind="text: title, toggleable: toggleable"></th>                    
                </tr>
                <tr data-bind="foreach: columns">
                    <td data-bind="toggleable: toggleable">
                        <input type="text" data-bind="value: $root.filter[id], valueUpdate: 'afterkeydown', visible: filterable" />
                    </td>
                </tr>
            </thead>
            <tbody data-bind="foreach: rows">
                <tr data-bind="foreach: $root.columns">
                    <td class="swc-cell" data-bind="toggleable: toggleable">
                         <input type="text" data-bind="value: $parent[id], enable: editable" /> 
                    </td>                            
                </tr>
            </tbody>            
        </table>
        
        
        <textarea style="width: 100%; height: 350px; margin-top: 30px;" data-bind="text:  ko.toJSON($data.rows)"></textarea>;
    </body>
</html>

CSS

.swc-cell {
    padding: 0.125em;
    border: solid 0.063em;
    background: #eee;    
}

.swc-editable {
    border: 0.063em solid #005898;
    background: #9ed5f6;
}

.swc-toggleable {
    background: #edc5af;
}

.swc-hidden {
    display: none;
}

JavaScript

// Knockout  custom bindings and functions
ko.bindingHandlers.toggleable = {
    init: function(element, valueAccessor) {
        var editable = valueAccessor();
        $(element).attr("data-swc-toggleable", editable).addClass(function() {
            return editable ? "swc-toggleable" : "";
        });
    }
};

ko.observableArray.fn.filterByProperty = function(filter) {
    return ko.computed(function() {
        var allItems = this(),
            matchingItems = [];
        for (var i = 0; i < allItems.length; i++) {
            var current = allItems[i],
                matches = true;
            for (var propName in filter) {
                if (!(filter[propName]() == "" || 
                      (propName in current && 
                       new RegExp(".*" + ko.utils.unwrapObservable(filter[propName]) + ".*").exec(ko.utils.unwrapObservable(current[propName]))))) {
                    matches = false;
                }
            }

            if (matches) {
                matchingItems.push(current);
            }
        }

        return matchingItems;
    }, this).extend({ throttle: 500 });
}




// Grid stuff
$(function() {

    var
    haviColumns = [
        {
        id: "descDC",
        title: "DC Description",
        editable: false,
        internal: true,
        toggleable: false,
        filterable: true}
            ,
    {
        id: "storeCountPlanned",
        title: "Store Count",
        editable: false,
        internal: false,
        toggleable: true,
        filterable: true}
        ,
    {
        id: "unitsF",
        title: "Feasibility Units",
        editable: true,
        internal: false,
        toggleable: false,
        filterable: false}
            ,
    {
        id: "casesF",
        title: "Feasibility Cases",
        editable: false,
        internal: false,
        toggleable: true,
        filterable: false},
    {
        id: "unitsA",
        title: "Awarded Units",
        editable: true,
       ...