Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/docs/css/bootstrap.min.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://mottie.github.io/tablesorter/docs/js/bootstrap.min.js"></script>
<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>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-chart.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-pager.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-columnSelector.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-cssStickyHeaders.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<div id="chart-container">
    <div id="chart"></div>
    <p></p>
</div>
<!-- ColumnSelector -->
<label for="colSelect" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="top" title="Toggle visible columns">
    <input id="colSelect" type="checkbox" class="hidden" />
    <i class="fa fa-table"></i>
    Column
    <div id="columnSelector" class="columnSelector"></div>
</label>
<!-- Chart -->
<label for="chartSelect" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="top" title="Toggle chart visibility">
    <input id="chartSelect" type="checkbox" class="hidden" />
    <i class="fa...

CSS

#pager div {
    display: inline-block;
}
#pager-container .spacer {
    padding: 0 5px;
}
#pager-container, #chart-container {
    text-align: center;
}
#chart-container > div {
    display: inline-block;
}
#chartbar {
    text-align: center;
}
#chartbar i.clickable {
    padding: 0 5px;
}
i.clickable {
    cursor: pointer;
    color: #999;
}
i.clickable.disabled, i.clickable.disabled:hover {
    cursor: not-allowed;
    color: #ccc;
}
i.active.clickable, i.clickable:hover {
    color: #000;
}
/*** custom css only popup ***/
 .columnSelector, .hidden, #chart-container {
    display: none;
}
#colSelect:checked + label {
    background: #5797d7;
    border-color: #555;
}
#colSelect:checked ~ #columnSelector {
    display: block;
}
#chartSelect:checked + label {
    background: #5797d7;
    border-color: #555;
}
.columnSelector {
    width: 120px;
    position: absolute;
    margin-top: 5px;
    padding: 10px;
    background: #fff;
    border: #ccc 1px solid;
    border-radius: 5px;
}
.columnSelector label {
    display: block;
    text-align: left;
}
.columnSelector label:nth-child(1) {
    border-bottom: #99bfe6 solid 1px;
    margin-bottom: 5px;
}
.columnSelector input {
    margin-right: 5px;
}
.columnSelector .disabled {
    color: #ddd;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  /* Initial settings */
  var $table = $('#table'),
    $chart = $('#chart'),
    $bar = $('#chartbar'),
    $rowType = $('[name=getrows]'),
    $icons = $('#chart-container i'),
    initType = 'pie', // graph types ('pie', 'pie3D', 'line', 'area', 'vbar', 'vstack', 'hbar' or 'hstack')
    chartTitle = 'Company Performance',
    axisTitle = 'Year',
    width = 900,
    height = 500,
    // extra data processing
    processor = function(data) {
      // console.log(data);
      return data;
    };

  function drawChart() {
    Highcharts.chart('chart', {
      chart: {
        type: "column"
      },
      title: {
        text: "Product All"
      },
      subtitle: {
        text: "Source: SHOP.com"
      },

      tooltip: {
        shared: true
      },

      xAxis: {
        categories: $table[0].config.chart.categories
      },
      series: $table[0].config.chart.series
    });
  }

  $("#chartSelect").change(function() {
    $("#chart-container").slideToggle($(this).is(":checked"));
    //drawChart();
  });

  $rowType.on("change", function() {
    $table[0].config.widgetOptions.chart_incRows = $rowType
      .filter(":checked")
      .attr("data-type");
    // update data, then draw new chart
    $table.trigger("chartData");
    //drawChart();
  });

  $table.on("columnUpdate pagerComplete", function(e) {
    var table = this;
    setTimeout(function() {
      if (table.hasInitialized) {
        $table.trigger("chartData");
        drawChart();
      }
    }, 10);
  });


  $table.tablesorter({
    theme: 'blue',
    sortList: [
      [0, 0]
    ],
    widgets: ['pager', 'zebra', 'filter', 'cssStickyHeaders', 'columnSelector', 'chart'],
    widgetOptions: {
      columnSelector_container: '#columnSelector',
      cssStickyHeaders_filteredToTop: false,
      pager_selectors: {
        container: '#pager'
      },
      pager_output:...