JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
	<body>
        <table class="tablesorter">
  <thead>
    <tr>
      <!-- add "filter-select" class or filter_functions : { '.first-name' : true } -->
      <!-- add "filter-match" class to just match the content, so selecting "Denni" will also show "Dennis" -->
      <th class="first-name filter-select" data-placeholder="Select a name">First Name</th>
      <th data-placeholder="Exact matches only">Last Name</th>
      <th data-placeholder="Choose a city">City</th>
      <th data-value="<30">Age</th>
      <th data-placeholder="Select a filter">Total</th>
      <th class="filter-select filter-onlyAvail">Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aaron</td>
      <td>Johnson Sr</td>
      <td>Atlanta</td>
      <td>35</td>
      <td>$5.95</td>
      <td>22%</td>
      <td>Jun 26, 2004 7:22 AM</td>
    </tr>
    <tr>
      <td>Aaron</td>
      <td>Johnson</td>
      <td>Yuma</td>
      <td>12</td>
      <td>$2.99</td>
      <td>5%</td>
      <td>Aug 21, 2009 12:21 PM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Henry Jr</td>
      <td>Tampa</td>
      <td>51</td>
      <td>$42.29</td>
      <td>18%</td>
      <td>Oct 13, 2000 1:15 PM</td>
    </tr>
    <tr>
      <td>Denni</td>
      <td>Henry</td>
      <td>New York</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Hood</td>
      <td>Boston</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent Sr</td>
      <td>Los Angeles</td>
      <td>18</td>
      <td>$15.89</td>
      <td>44%</td>
     ...

JavaScript

$(function() {

  // call the tablesorter plugin
  $("table").tablesorter({
    theme: 'blue',

    // hidden filter input/selects will resize the columns, so try to minimize the change
    widthFixed : true,

    // initialize zebra striping and filter widgets
    widgets: ["zebra", "filter"],

    // headers: { 5: { sorter: false, filter: false } },

    widgetOptions : {

      // extra css class applied to the table row containing the filters & the inputs within that row
      filter_cssFilter   : '',

      // If there are child rows in the table (rows with class name from "cssChildRow" option)
      // and this option is true and a match is found anywhere in the child row, then it will make that row
      // visible; default is false
      filter_childRows   : false,

      // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
      // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
      filter_hideFilters : false,

      // Set this option to false to make the searches case sensitive
      filter_ignoreCase  : true,

      // jQuery selector string of an element used to reset the filters
      filter_reset : '.reset',

      // Use the $.tablesorter.storage utility to save the most recent filters
      filter_saveFilters : true,

      // Delay in milliseconds before the filter widget starts searching; This option prevents searching for
      // every character while typing and should make searching large tables faster.
      filter_searchDelay : 300,

      // Set this option to true to use the filter to find text from the start of the column
      // So typing in "a" will find "albert" but not "frank", both have a's; default is false
      filter_startsWith  : false,

      // if false, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
      // below the header row. Additionally, tabbing...