JSFiddle - React, Tailwind, and code Playground

by Natta Wang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<script src="http://amd.egoworx.com/jsfiddle-dojo-require.js"></script>
<div id="filter-wrapper">
    <input
        id="filter"
        data-dojo-type="dijit/form/TextBox"
        data-dojo-props="
            placeHolder: 'filter by name',
            intermediateChanges:true
            "
        style="padding:2px;margin:3px;width:20em;"        
    />
</div>

<div id="grid"></div>

CSS

html, body {
    height: 100%;
}
body {
    font-family: sans-serif;
    font-size: 11px;            
}

#filter-wrapper {
    background-color: lightyellow;
    font-size: 14px;
}

#grid {
    position: absolute;
    top: 32px;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
}

JavaScript

require([
    "dojo/ready",
    "dojo/_base/declare",
    "dojo/store/Memory",
    
    "dgrid/OnDemandGrid",
    "data/dtuned",
    
    "dijit/registry",
    "dijit/form/TextBox",
    "dojo/domReady!"
], function(
    ready,
    declare,
    Memory,
        
    Grid,
    data,
        
    registry
) {
    
ready(function() {
    
    var timeoutId;
    var filter = registry.byId("filter");
    var store = new Memory({ data: data});
    
    var filterQuery = function(item, index, items) {
        var filterString = filter ? filter.get("value") + "" : "";
        
        // early exists
        if (filterString.length < 2) return true;
        if (!item.Name) return false;
        
        var name = (item.Name + "").toLowerCase();
        if (~name.indexOf(filterString.toLowerCase())) { return true;}
        
        return false;
    }
    
    var grid = new Grid({
        store: store,
        query: filterQuery,
        columns: {
            Name: "Name",
            Year: "Year",
            Artist: "Artist",
            Album: "Album",
            Genre: "Genre"
        }
    }, "grid");
    
    filter.watch("value", function(name, oldValue, newValue) {
        if (timeoutId) {
            clearTimeout(timeoutId);
            timeoutId = null;
        };
        
        timeoutId = setTimeout(function() {
            grid.refresh();
        }, 300);
    });
    
});    
});