JSFiddle - React, Tailwind, and code Playground

by Mottie

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>
<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.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-filter-formatter-select2.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-stickyHeaders.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-storage.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 class="filter-select filter-match">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>
  </tbody>
</table>

JavaScript

$(function() {

  var savedFilters = [];

  $('.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("refreshWidgets", [true]);
  })

  $('.tablesorter')
    .tablesorter({
      theme: 'blue',
      widthFixed: true,
      widgets: ['zebra', 'filter'], // , 'stickyHeaders' <- removed (causing problems)
      initialized: function(table) {
        savedFilters = $(table).data('lastSearch');
        setTimeout(function() {
          $('table tbody').append('<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><td>Moscow</td></tr>');
          $(table)
            .data('lastSearch', savedFilters)
            .trigger("update");
        }, 1000);
      },
      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',
    ...