Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<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-formatter.js"></script>
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th class="heat-map">data 1</th>
      <th class="heat-map">data 2</th>
      <th class="heat-map">data 3</th>
      <th class="heat-map">data 4</th>
      <th class="heat-map">data 5</th>
      <th class="heat-map">data 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Wanda</td>
      <td>25</td>
      <td>55</td>
      <td>26</td>
      <td>19</td>
      <td>39</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Whitney</td>
      <td>44</td>
      <td>27</td>
      <td>13</td>
      <td>4</td>
      <td>38</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Ora</td>
      <td>3</td>
      <td>52</td>
      <td>35</td>
      <td>11</td>
      <td>20</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Blake</td>
      <td>31</td>
      <td>34</td>
      <td>15</td>
      <td>25</td>
      <td>14</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Rina</td>
      <td>36</td>
      <td>65</td>
      <td>33</td>
      <td>2</td>
      <td>35</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Melissa</td>
      <td>41</td>
      <td>17</td>
      <td>27</td>
      <td>16</td>
      <td>32</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Matthew</td>
      <td>32</td>
      <td>59</td>
      <td>17</td>
      <td>20</td>
      <td>31</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Zeph</td>
      <td>53</td>
      <td>14</td>
      <td>4</td>
      <td>16</td>
      <td>33</td>
      <td>11</td>
    </tr>
    <tr>
      <td>Dominic</td>
      <td>46</td>
      <td>25</td>
      <td>3</td>
      <td>15</td>
      <td>22</td>
      <td>19</td>
   ...

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {

  $('table').tablesorter({
    theme: 'blue',
    widgets: ['filter']
  });

  var $cells = $('tbody tr').find('td:gt(0)');

  var counts = $cells.map(function() {
    return parseInt($(this).text(), 10);
  }).get();

  // run max value function and store in variable
  var max = Math.max.apply(null, counts);

  n = 100; // Declare the number of groups

  // Define the ending colour, which is white
  xr = 255; // Red value
  xg = 255; // Green value
  xb = 255; // Blue value

  // Define the starting colour #f32075
  yr = 243; // Red value
  yg = 32; // Green value
  yb = 117; // Blue value

  // Loop through each data point and calculate its % value
  $cells.each(function() {
    var val = parseInt($(this).text());
    var pos = parseInt((Math.round((val / max) * 100)).toFixed(0));
    red = parseInt((xr + ((pos * (yr - xr)) / (n - 1))).toFixed(0));
    green = parseInt((xg + ((pos * (yg - xg)) / (n - 1))).toFixed(0));
    blue = parseInt((xb + ((pos * (yb - xb)) / (n - 1))).toFixed(0));
    $(this).css('background-color', 'rgb(' + red + ',' + green + ',' + blue + ')');
  });
console.log(max, counts, $cells)
});