JSFiddle - React, Tailwind, and code Playground

by schlomm

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.14/dgrid/css/dgrid.css">
<div id="grid"></div>
<p>
    How to Use:
    <br/>
    1) Click on the Filter Icon, a TextBox Shows.
    <br/>
    2) Type in the textbox to filter that column.
    <br/>
    3) if multiple text boxes are shown and all have values typed in all will be applied as a filter.
    <br/>
    4) Clicking the filter icon again clears that filter and hides the textbox.
</p>
<p>
ColumnHider not working in jsfiddle may be you could fix it!
<br/>  
This example is based on another persons idea. Could not find that example again.<br/> Hope it helps those wanting to put Filter on their dgrid columns
<br/>
I have used SitePen's dTuned store as the data source. could not find the cdn link to the same so copied it from their downloaded source code.
</p>
<script src="https://js.arcgis.com/3.14/"></script>

CSS

.dgrid-row-even {
    background: #c9c3c3;
    /*color: #fff;*/
}
.dgrid-column-name {
    background-color: #005b9d;
    color: whitesmoke;
    font-weight: bold;
}
.dgrid-header {
    background-color: #005b9d;
    color: whitesmoke;
    font-weight: bold;
}
.dgrid {
    background-color:#F0F0F0;
    height:200px;
    /*height:auto;*/
}

JavaScript

var data = {
    identifier: "Key",
    label: "Name",
    items: [{
        "Key": "1",
        "Name": "Grind",
        "Artist": "Alice In Chains",
        "Album": "Alice In Chains",
        "Genre": "Alternative",
        "Time": "284",
        "TrackNumber": "1",
        "Year": "1995"
    }, {
        "Key": "2",
        "Name": "Brush Away",
        "Artist": "Alice In Chains",
        "Album": "Alice In Chains",
        "Genre": "Alternative",
        "Time": "202",
        "TrackNumber": "2",
        "Year": "1995"
    }, {
        "Key": "3",
        "Name": "Sludge Factory",
        "Artist": "Alice In Chains",
        "Album": "Alice In Chains",
        "Genre": "Alternative",
        "Time": "432",
        "TrackNumber": "3",
        "Year": "1995"
    }, {
        "Key": "4",
        "Name": "Heaven Beside You",
        "Artist": "Alice In Chains",
        "Album": "Alice In Chains",
        "Genre": "Alternative",
        "Time": "327",
        "TrackNumber": "4",
        "Year": "1995"
    }, {
        "Key": "5",
        "Name": "Head Creeps",
        "Artist": "Alice In Chains",
        "Album": "Alice In Chains",
        "Genre": "Alternative",
        "Time": "388",
        "TrackNumber": "5",
        "Year": "1995"
    }, {
        "Key": "6",
        "Name": "Again",
        "Artist": "Alice In Chains",
        "Album": "Alice In Chains",
        "Genre": "Alternative",
        "Time": "245",
        "TrackNumber": "6",
        "Year": "1995"
    }, {
        "Key": "7",
        "Name": "Shame In You",
        "Artist": "Alice In Chains",
        "Album": "Alice In Chains",
        "Genre": "Alternative",
        "Time": "335",
        "TrackNumber": "7",
        "Year": "1995"
    }, {
        "Key": "8",
        "Name": "God Am",
        "Artist": "Alice In Chains",
        "Album": "Alice In Chains",
        "Genre": "Alternative",
        "Time": "248",
        "TrackNumber": "8",
        "Year": "1995"
    }, {
        "Key": "9",
    ...