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">
<input id="filterSeparate_Name" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="filter" data-dojo-props="
            placeHolder: 'filter by name',
            intermediateChanges:true
            " style="padding:2px;margin:3px;width:20em;" />
<input id="filterSeparate_Genre" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="filterGenre" data-dojo-props="
            placeHolder: 'filter by genre',
            intermediateChanges:true
            " style="padding:2px;margin:3px;width:20em;" />
<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",
    "Name": "So Close",
    "Artist": "Alice In Chains",
    "Album": "Alice In Chains",
    "Genre": "Alternative",
    "Time": "165",
    "TrackNumber": "9",
    "Year": "1995"
  }, {
    "Key": "10",
    "Name": "Nothin' Song",
    "Artist": "Alice In Chains",
    "Album": "Alice In...