JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<h1>Datatable with column filter</h1>
<div style='width:600px' class='yui3-skin-sam'>
<div style='width:100%; border:2px solid #ccc; border-radius:10px; margin:5px;'>
<p style='padding:10px'>Click the filter button to show hide filters. Filters can begin with any of the following prefixes:</p>
<ul>
  <li>= (equals)</li>
  <li>!= (not equals)</li>
  <li>% (contains)</li>
  <li>!% (not contains)</li>
  <li>&gt; (greater than - numeric)</li>
  <li>&gt;= (greater than or equals - numeric)</li>
  <li>&lt; (less than - numeric)</li>
  <li>&lt;= (less than or equals - numeric)</li>
  <li>No prefix assumes '%' (like)</li>
</ul>
   </div>
<div id='table'>
</div>	
</div>

CSS

.yui3-datatable-filters-row,
    .yui3-datatable-filters-row th,
    .yui3-datatable-filters-row .yui3-datatable-filter-liner {
    opacity:1;
    height:43px;
    -moz-transition:.5s ease-in;
    }
    .yui3-datatable-filters-row th input {
    opacity:1;
    height:25px;
    -moz-transition:.5s ease-in;
    }

    .yui3-datatable-filters-row th {
    height:25px;
    text-align:center;
    border:1px solid #ccc;
    border-top:1px solid #bbb;
    border-right:0px;
    background:#ddd;
    }
    .yui3-datatable-filters-row input {
    border:none;
    padding:5px;
    background:#fff;
    border:1px dashed #aaa;
    border-radius:5px;
    margin:3px;
    height:25px;
    -moz-transition:height .5s ease-in;
    }

    .yui3-datatable-no-filter {
    }
    
    .yui3-datatable-filters-hidden,
    .yui3-datatable-filters-hidden th,
    .yui3-datatable-filters-hidden th input,
    .yui3-datatable-filters-hidden .yui3-datatable-filter-liner {
    height:0px;
    opacity:0;
    -moz-transition:.5s ease-in;
    }
    
    #table {
    width:600px;
        
    }
    .yui3-datatable-table {
    width:100%;
    }

JavaScript

YUI.add(
    
    'datatable-filter',
    
    function(Y) { 
	
	/**
	   Adds support for filtering the table data by API methods
	   
	   @module datatable
	   @submodule datatable-filter
	   @since 3.5.0
	**/
	var YLang = Y.Lang,
	isBoolean = YLang.isBoolean,
	isString = YLang.isString,
	isArray = YLang.isArray,
	isObject = YLang.isObject,

	toArray = Y.Array,
	sub = YLang.sub;

	/**
	   <pre><code>
	   var table = new Y.DataTable({
	   columns: [ 'id', 'username', 'name', 'birthdate' ],
	   data: [ ... ],
	   filters: true // this will render a filter input box for every column
	   });
	   
	   table.render('#table');
	   </code></pre>
	   
	   Setting `filters` to `true` will enable UI filtering for all columns. To enable
	   UI filtering for certain columns only, set `filters` to an array of column keys,
	   or just add `filters: true` to the respective column configuration objects.
	   This uses the default setting of `filters: auto` for the DataTable instance.
	   
	   <pre><code>
	   var table = new Y.DataTable({
	   columns: [
	   'id',
	   { key: 'username', renderFilter: true },
	   { key: 'name' },
	   { key: 'birthdate', renderFilter: true, filter : "=123", filterFn : customFilterFn }
	   ],
	   data: [ ... ]
	   // filters: 'auto' is the default
	   });
	   
	   To disable UI filtering for all columns, set `filters` to `false`. This still
	   permits filtering via the API methods.

	   filter via api:

	   var filterBy = 
	   {  
	   username : "=student",
	   name       : "%richard",
	   birthdate  : ">01-01-1975"
	   }
		    
	table.set("filterBy",filterBy);
	
	As new records are inserted into the table's `data` ModelList, they will be checked against the filter to determine if they will be rendered
	
	The current filters are stored in the `filterBy` attribute. Assigning this value at instantiation will automatically filter your data.
	
	Filtering is done by a simple value comparison using '=', '!=', '<', '<=', '>', '>='  on the field value....