JSFiddle - React, Tailwind, and code Playground

by donniec

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script id="hierarcial" type="text/html">
    <li>
        <span class="name" data-bind="visible: !hidden()">
            <span data-bind='if: subscribed'>√</span>
            <span data-bind='if: ineligible'>X</span>
            <!-- ko if: (!ineligible() && !subscribed()) -->
                <input type="checkbox" data-bind="checked: selected" />
            <!-- /ko -->
            <span data-bind='text: name'></span>
        </span>
        <ul data-bind='template: { name: "hierarcial", foreach: children }'></ul>
    </li>
</script>

<script id="alphabetical" type="text/html">
    <li>
        <span class="name" data-bind="visible: !hidden()">
            <span data-bind='if: subscribed'>√</span>
            <span data-bind='if: ineligible'>X</span>
            <!-- ko if: (!ineligible() && !subscribed()) -->
            <input type="checkbox" data-bind="checked: selected" />
            <!-- /ko -->
            <span data-bind='text: name'></span>             
        </span>
    </li>
</script>

<div style="width:600px">
    <div style="float:right">
       Filter: <input type="text" data-bind="value: filter, valueUpdate: 'keyup', updateTableOnce: filter" /><a href="javascript:void(0)" data-bind="click: clearFilter">Clear Filter</a>
    </div>    
    <div style="float:left">
        <div>
            <a href="javascript:void(0)" data-bind="click: toggleHideIneligible"><span data-bind="text: hideIneligible()?'Show':'Hide'"></span> Ineligible</a> <span data-bind="text: totalHidden('ineligible')"></span> Hidden    
        </div>
        <div>
            <a href="javascript:void(0)" data-bind="click: toggleHideSubscribed"><span data-bind="text:...

CSS

ul {
    list-style: none;
    
}
#people{
    padding-left: 0;
    width: 500px;
    
}
li {
   
}
li input{
   
   
}
li .name {
    background-color: #ccc;
    padding-left: 1000px;
    margin-left: -1000px;
    width: 100%;
    display: inline-block;     
}

li .odd.name{ 
    background-color: #fff;
}

JavaScript

// Some sample data
var items = {items:[{"name":"ROI Motor Cars (ddcdemo)","ineligible":false,"subscribed":false,"children":[{"name":"Au Sable Acura of ROI Mo... (ddcdemoacura)","ineligible":false,"subscribed":false,"children":[]},{"name":"CRM Motors (crmmotors)","ineligible":false,"subscribed":true,"children":[{"name":"CRM Motors Audi (crmmotorsaudi)","ineligible":false,"subscribed":false,"children":[]},{"name":"CRM Motors BMW (crmmotorsbmw)","ineligible":false,"subscribed":false,"children":[]},{"name":"CRM Motors Chrysler (crmmotorschrysler)","ineligible":false,"subscribed":true,"children":[]},{"name":"CRM Motors Hyundai (crmmotorshyundai)","ineligible":true,"subscribed":false,"children":[]},{"name":"CRM Motors Kia (crmmotorskia)","ineligible":false,"subscribed":false,"children":[]},{"name":"CRM Motors Volvo (crmmotorsvolvo)","ineligible":false,"subscribed":true,"children":[]}]},{"name":"Cross Country Chrysler (ddcdemochrysler)","ineligible":false,"subscribed":false,"children":[]},{"name":"Grand Forks Kia (ddcdemokia1)","ineligible":false,"subscribed":false,"children":[]},{"name":"ROI Audi (ddcdemoaudi)","ineligible":false,"subscribed":true,"children":[]},{"name":"ROI BMW (ddcdemobmw)","ineligible":false,"subscribed":false,"children":[]},{"name":"ROI Cadillac (ddcdemocadillac)","ineligible":true,"subscribed":false,"children":[]},{"name":"ROI Chevrolet (ddcdemochevrolet)","ineligible":false,"subscribed":true,"children":[]},{"name":"ROI Fiat (ddcdemofiat)","ineligible":false,"subscribed":false,"children":[]},{"name":"ROI Ford (ddcdemoford)","ineligible":false,"subscribed":false,"children":[]},{"name":"ROI Honda (ddcdemohonda)","ineligible":false,"subscribed":true,"children":[]},{"name":"ROI Infiniti (ddcdemoinfiniti)","ineligible":false,"subscribed":false,"children":[]},{"name":"ROI Jaguar (ddcdemojaguar)","ineligible":false,"subscribed":false,"children":[]},{"name":"ROI Kia (ddcdemokia)","ineligible":true,"subscribed":false,"children":[]},{"name":"ROI Land Rover...