JSFiddle - React, Tailwind, and code Playground

by William Cunningham

HTML

<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.widgets.js"></script>
<select id="states" multiple>
  <option>MO</option>
  <option>CA</option>
  <option>VA</option>
  <option>NC</option>
</select>
<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>State</th>
      <th>Number</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zach</td>
      <td>CA,VA,MO</td>
      <td>8046271484</td>
      <td>3/8/2016</td>
    </tr>
    <tr>
      <td>Will</td>
      <td>AK,NC,MI,MO</td>
      <td>988239874</td>
      <td>3/9/2016</td>
    </tr>
  </tbody>
</table>

CSS

table {
  
}


/*

http://mottie.github.io/tablesorter/docs/
http://mottie.github.io/tablesorter/docs/example-widget-filter.html
https://cdnjs.com/libraries/jquery.tablesorter

https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.widgets.js
*/

JavaScript

// sort table by name (a-z) col or date(num)
// highlight the right rows

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 

https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.5/js/jquery.tablesorter.min.js