<!-- jQuery & jQuery UI -->
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-latest.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

<!-- tablesorter plugin -->
<link rel="stylesheet" href="css/theme.blue.css">
<script src="js/jquery.tablesorter.js"></script>

<!-- tablesorter filter widget - loaded after the plugin -->
<script src="/js/widgets/widget-filter.js"></script>

$( function() {

  // modified from http://jqueryui.com/selectmenu/#custom_render
  $.widget( 'custom.iconselectmenu', $.ui.selectmenu, {
    _renderItem: function( ul, item ) {
      var hasClass,
        li = $( '<li>' ),
        wrapper = $( "<div>", {
          // empty strings don't work, pass a  
          text: item.label || '\xA0'
        });
      if ( item.disabled ) {
        li.addClass( 'ui-state-disabled' );
      }
      hasClass = item.element.attr( 'data-class' );
      $( '<span>', {
        style : item.element.attr( 'data-style' ),
        'class' : hasClass ? 'ui-icon ' + item.element.attr( 'data-class' ) : ''
      })
      .appendTo( wrapper );
      return li.append( wrapper ).appendTo( ul );
    }
  });

  var $table = $( '#table' ),
    selectmenuClass = 'selectmenu';

  // reinitialize on "updateComplete" just-in-case an "updateAll" was called
  $table.bind( 'tablesorter-initialized updateComplete', function() {
    $table
      .find( '.' + selectmenuClass )
      .iconselectmenu({
        change: function() {
          // start a new search
          $table.trigger( 'search' );
        }
      })
      .iconselectmenu( 'menuWidget' )
      .addClass( 'ui-menu-icons customicons' );
  });

  $table.tablesorter({
    theme : 'blue',
    widthFixed : true,
    widgets : [ 'zebra', 'filter' ],
    ignoreCase : false,
    widgetOptions : {
      // add 'selectmenu' class name to first filter
      filter_cssFilter: [ selectmenuClass ],
      filter_selectSource  : {
        0 : [
          { value : '/\\.js$/',            'data-class' : 'ui-icon-script',   text : 'javascript' },
          { value : '/\\.(jpg|png|gif)$/', 'data-class' : 'ui-icon-image',    text : 'Image' },
          // plain strings are also acceptable - the string is added to both the text & value attribute
          // 'foobar',
          { value : '.css',                'data-class' : 'ui-icon-note',     text : 'CSS' },
          { value : '.html',               'data-class' : 'ui-icon-document', text : 'HTML page' },
          { value : '/\\.(json|txt|md)$/', 'data-class' : 'ui-icon-help',     text : 'Misc' }
        ]
      }
    }
  });

});

<table id="table" class="tablesorter">
  <thead>
    <tr>
      <th class="filter-select filter-match">File Name</th>
      <th>Updated</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>jquery.js</td><td>11/5/2015</td></tr>
    <tr><td>jquery-ui.js</td><td>11/5/2015</td></tr>
    <tr><td>map.jpg</td><td>10/22/2015</td></tr>
    <tr><td>tooltips.js</td><td>8/5/2015</td></tr>
    <tr><td>jquery-ui.css</td><td>11/5/2015</td></tr>
    <tr><td>index.html</td><td>11/9/2015</td></tr>
    <tr><td>smiley.gif</td><td>8/14/2015</td></tr>
    <tr><td>demo.html</td><td>11/7/2015</td></tr>
    <tr><td>theme.blue.css</td><td>10/17/2015</td></tr>
    <tr><td>tablesorter.js</td><td>11/9/2015</td></tr>
    <tr><td>readme.md</td><td>11/9/2015</td></tr>
    <tr><td>package.json</td><td>11/8/2015</td></tr>
    <tr><td>contributions.md</td><td>10/8/2015</td></tr>
    <tr><td>license.txt</td><td>10/2/2015</td></tr>
    <tr><td>logo.png</td><td>11/1/2015</td></tr>
  </tbody>
</table>