JSFiddle - React, Tailwind, and code Playground

by neosoyn

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) {
  'use strict';
  /**
  Adds support for filtering the table data by API methods
  @module datatable
  @submodule datatable-filter
  **/
  var YLang = Y.Lang,
  isBoolean = YLang.isBoolean,
  isString = YLang.isString,
  isArray = YLang.isArray,
  isObject = YLang.isObject,

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

  function Filters() {}

  Filters.ATTRS = {
    /**
    Controls which columns can show a filtering input
    Acceptable values are:
    * "auto" - (default) looks for `renderFilter: true` in the column configurations
    * "true" - all columns have a filter field rendered
    * "false" - no UI filters are enabled
    * {String[]} - array of key names to give filter fields

    @attribute filters
    @type {String|String[]|Boolean}
    @default "auto"
    **/
    filters: {
      value: 'auto',
      validator: '_validateFilters'
    },

    /**
    The current filter configuration to maintain in the data.

    Accepts column `key` objects with a single property the value of the filter
    E.g. `{ username: '%student' }`
    E.g. `[{ username : '%student' }, { age : '<40'}]

    @attribute filterBy
    @type {String|String[]|Object|Object[]}
    **/
    filterBy: {
      validator: '_validateFilterBy'
    },

    /**
    Strings containing language for filtering tooltips.

    @attribute strings
    @type {Object}
    @default (strings for current lang configured in the YUI instance config)
    **/
    strings: {}
  };

  Y.mix(Filters.prototype, {

    /**
    Filter the data in the `data` ModelList and refresh the table with the new
    order.

    @method filter
    @param {String|String[]|Object|Object[]} fields The field(s) to filter by
    @param {Object} [payload] Extra `filter` event payload you want to send along
    @return {DataTable}
    @chainable
    **/
    filter : function (fields, payload) {
      /**
      Notifies of an impending filter, either from changing the filter in the UI
     ...