$.tablesorter.addWidget({
  id: 'material-icons',
  options: {
    icon_text: {
      asc: "keyboard_arrow_up",
      desc: "keyboard_arrow_down",
      unsorted: "format_line_spacing"
    }
  },
  format: function(table, c, wo) {
    var icon = "." + c.cssIcon;
    c.$headers.find(icon).text(wo.icon_text.unsorted);
    $.each(c.sortList, function(indx, val) {
      var dir = val[1] === 0 ? 'asc' : 'desc';
      c.$headers.eq(val[0]).find(icon).text(wo.icon_text[dir]);
    });
  }
});

$(function() {
  $("table").tablesorter({
    theme: "materialize",
    widthFixed: true,

    // add material icons to headers
    headerTemplate: "{content}{icon}",
    cssIcon: "material-icons",

    // widget code contained in the jquery.tablesorter.widgets.js file
    // use the zebra stripe widget if you plan on hiding any
    // rows (filter widget)
    widgets: ["filter", "zebra", "material-icons"],

    widgetOptions: {
      // using the default zebra striping class name, so it actually
      // isn't included in the theme variable above; this is ONLY
      // needed for materialize theming if you are using the filter
      // widget, because rows are hidden
      zebra: ["even", "odd"],
      // reset filters button
      filter_reset: ".reset",
      // extra css class name (string or array) added to the filter
      // element (input or select); select needs a "browser-default"
      // class or it gets hidden
      filter_cssFilter: ["", "", "browser-default"]
    }
  });
});