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://mottie.github.io/tablesorter/js/widgets/widget-filter-formatter-select2.js"></script>
<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>
    </tr>
  </thead>
  <tbody>
    <tr><td>abc 123</td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
    <tr><td>abc 1</td><td>abc 1</td><td>34</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
    <tr><td>abc 9</td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
    <tr><td>zyx 24</td><td>zyx 24</td><td>67</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
    <tr><td>abc 11</td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
    <tr><td>def 2</td><td>def 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
    <tr><td>abc 9</td><td>abc 9</td><td>75</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
    <tr><td>def 10</td><td>def 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>
    <tr><td>zyx 1</td><td>zyx 1</td><td>99</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
    <tr><td>zyx 12</td><td>zyx...

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></tr>');
        $('table').trigger('update');
    });
    
  $('.tablesorter').tablesorter({
    theme: 'blue',
    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 (match)
        0 : function($cell, indx){
          return $.tablesorter.filterFormatter.select2( $cell, indx, {
            match : true,         // adds "filter-match" to header
            cellText : 'Match: ', // Cell text
            width: '85%',         // adjusted width to allow for cell text
            value: ['abc', 'def'] // initial values
          });
        },

        // Alphanumeric (exact)
        1 : function($cell, indx){
          return $.tablesorter.filterFormatter.select2( $cell, indx, {
            match : false // exact match only
          });
        }
      },

      // option added in v2.16.0
      filter_selectSource : {
        // Alphanumeric match (prefix only)
        // added as select2 options (you could also use select2 data option)
        0 : function(table, column) {
          return ['abc', 'def', 'zyx'];
        }
      }
    }

  });

  });