Tablesorter from JSON

by Kyle Mitofsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.combined.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-build-table.min.js"></script>
<div id="jsonTable"></div>















<div style='position:fixed;bottom:0;left:0;padding:5px; background:lightgray;width:100%;'>
  <b>About this Question on SO</b>:
     <a href="https://stackoverflow.com/a/52796984/1366033">
   Using tablesorter with JavaScript array</a><br>
   <b>Docs</b>:
  <a href='https://mottie.github.io/tablesorter/docs/example-widget-build-table.html'>
    Tablesorter - Build Table Widget
    </a>
</div>

JavaScript

var tableData = [
  // header
  [ "Move" , "Start Up"],
  // rows
  [ "Phoenix Smasher", 15],
  [ "Bone Breaker", 16],
  [ "DeathFist", 60],
  [ "Thruster", 20],
  [ "S Jab", 10]
]

$("#jsonTable").tablesorter({
  theme: 'materialize',
  widgets: ['zebra'],
  widgetOptions: {
    build_type: 'array', 		 		// can sometimes be detected if undefined
    build_source: tableData,
    build_headers: {
      rows    : 1,  						 // Number of header rows from the array
      widths  : [ '70%', '20%' ] // set header cell widths
    },
    build_footers : {
      rows    : 0,  						 // Number of header rows from the array
    },
  }
});