JSFiddle - React, Tailwind, and code Playground

by xcrico

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/ericmbarnard/KoGrid/master/koGrid.debug.js"></script>
<link rel="stylesheet" href="https://raw.github.com/ericmbarnard/KoGrid/master/KoGrid.css">
<div>          
    <input data-bind="value: filter, valueUpdate: 'afterkeydown'" placeholder="Search..." />
                              
    <div style="width: 500px; height: 500px;" data-bind="koGrid: { data: filteredItems }"></div>
</div>

JavaScript

$(document).ready(function () {
    
    function vm() {
        var self = this;
        self.myObsArray = ko.observableArray([
            { firstName: 'John', lastName: 'Doe' },
            { firstName: 'Jane', lastName: 'Doe' }
        ]);
                
        self.filter = ko.observable("");
        self.filteredItems = ko.computed(function() {
            var filter = self.filter().toLowerCase();
            if (!filter) {
                return self.myObsArray();
            } else {
                return ko.utils.arrayFilter(self.myObsArray(), function(item) {
                    return item.firstName.toLowerCase().indexOf(filter) != -1;
                });
            }
        });            
    };
    ko.applyBindings(new vm());
});