JSFiddle - React, Tailwind, and code Playground

by Igor

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/docs/css/jquery-ui.min.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/docs/css/select2-3.4.6.min.css">
<script src="https://mottie.github.io/tablesorter/docs/js/select2-3.4.6.min.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-filter-formatter-select2.js"></script>
<button class="change">Change Filter</button>
<button class="add">Add Row</button>
<button class="reset">Reset Search</button>
<table class="tablesorter">
  <thead>
    <tr>
      <!-- filter-match is automatically added by select2 "match" option -->
      <th>AlphaNumeric (match)</th>
      <th class="filter-onlyAvail">AlphaNumeric (exact; only available)</th>
      <th>Numeric</th>
      <th>Animals</th>
      <th>Sites</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>abc 123</td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td><td>Los Angeles</td></tr>
    <tr><td>abc 1</td><td>abc 1</td><td>34</td><td>Ox</td><td>http://www.yahoo.com</td><td>San Francisco</td></tr>
    <tr><td>abc 9</td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td><td>London</td></tr>
    <tr><td>zyx 24</td><td>zyx 24</td><td>67</td><td>Bison</td><td>http://www.whitehouse.gov/</td><td>New York</td></tr>
    <tr><td>abc 11</td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/<td>Moscow</td></tr>
    <tr><td>def 2</td><td>def 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td><td>Madrid</td></tr>
    <tr><td>abc 9</td><td>abc 9</td><td>75</td><td>Lion</td><td>http://www.nytimes.com/</td><td>New York</td></tr>
    <tr><td>def 10</td><td>def...

JavaScript

$(function(){

  $('.add').click(function(){
        $('table tbody').append('<tr><td>abc99</td><td>abc99</td><td>99</td><td>Rabbit</td><td>http://www.rabbit.com</td><td>Boston</td></tr>');
        $('table').trigger("update");
    });
    
  $('.change').click(function() {
  	var wo = $('table')[0].config.widgetOptions
    wo.filter_functions = {
    	2 : {
          "< 20"      : function(e, n, f, i, $r, c, data) { return n < 10; },
          "20 - 200" : function(e, n, f, i, $r, c, data) { return n >= 10 && n <=100; },
          "> 200"     : function(e, n, f, i, $r, c, data) { return n > 100; }
        }
    }
    $('table').trigger("updateAll");
  })
    
  $('.tablesorter').tablesorter({
    theme: 'blue', debug: true,
    widthFixed: true,
    widgets: ['zebra', 'stickyHeaders', 'filter'],
    widgetOptions : {
      // Use the $.tablesorter.storage utility to save the most recent filters
      filter_saveFilters : true,
      // jQuery selector string of an element used to reset the filters
      filter_reset : 'button.reset',
      // add custom selector elements to the filter row
      filter_formatter : {
     
     // Alphanumeric (exact)
        1 : function($cell, indx){
          return $.tablesorter.filterFormatter.select2( $cell, indx, {
            match : false // exact match only
          });
        },

        // Alphanumeric (exact)
        5 : function($cell, indx){
          return $.tablesorter.filterFormatter.select2( $cell, indx, {
            match : false // exact match only
          });
        }
      },
      filter_functions : {
      	2 : {
          "< 10"      : function(e, n, f, i, $r, c, data) { return n < 10; },
          "10 - 100" : function(e, n, f, i, $r, c, data) { return n >= 10 && n <=100; },
          "> 100"     : function(e, n, f, i, $r, c, data) { return n > 100; }
        }
      }
    }

  });

  });