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-editable.js"></script>
<h3>Navigation</h3>
Use:
<ul>
  <li>up arrow (<kbd>&uarr;</kbd>; go up)</li>
  <li>down arrow (<kbd>&darr;</kbd>; go down)</li>
  <li><kbd>Tab</kbd> (go right)</li>
  <li><kbd>Shift</kbd> + <kbd>Tab</kbd> (go left)</li>
</ul>
<table id="table" class="tablesorter">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr id="db-row-344">
      <td class="no-edit">Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr id="db-row-884">
      <td>John</td>
      <td>Hood</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr id="db-row-234">
      <td>Clark</td>
      <td>Kent</td>
      <td>18</td>
      <td>$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr id="db-row-756">
      <td>Bruce</td>
      <td>Almighty</td>
      <td>45</td>
      <td>$153.19</td>
      <td>44%</td>
      <td>Jan 18, 2001 9:12 AM</td>
    </tr>
    <tr id="db-row-232">
      <td>Bruce</td>
      <td>Evans</td>
      <td>22</td>
      <td>$13.19</td>
      <td>11%</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
  </tbody>
</table>

CSS

.tablesorter tbody > tr > td[contenteditable=true]:focus {
  outline: #08f 1px solid;
  background: #eee;
  resize: none;
}

td.no-edit,
span.no-edit,
tr td:nth-child(6) {
  background-color: rgba(230, 191, 153, 0.5);
}

.focused {
  color: blue;
}

kbd {
  background: #eee;
  padding: 0 2px;
  border: #333 1px solid;
  border-radius: 2px;
}

JavaScript

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

  function editComplete(el) {
    var $el = $(el),
      newContent = $el.text(),
      // there shouldn't be any colspans in the tbody
      cellIndex = el.cellIndex,
      // data-row-index stored in row id
      rowIndex = $el.closest('tr').attr('id');
    /*
    $.post("mysite.php", {
      "row": rowIndex,
      "cell": cellIndex,
      "content": newContent
    });
    */
  }

  function moveCells(el, dir) {
    var $el = $(el),
      changed = false,
      // there shouldn't be any colspans in the tbody
      cellIndex = el.cellIndex,
      $allRows = $el.closest('tbody').find('tr'),
      rowIndex = $allRows.index($el.closest('tr'));
    if (dir === "ArrowUp" && rowIndex - 1 >= 0) {
      rowIndex--;
      changed = true;
    } else if (dir === "ArrowDown" && rowIndex + 1 < $allRows.length) {
      rowIndex++;
      changed = true;
    }
    if (changed) {
      $el.blur();
      $allRows.eq(rowIndex).find('td').eq(cellIndex).find('[contenteditable]').focus();
    }
  }

  $("#table").tablesorter({
      theme: 'blue',

      widgets: ['editable'],
      widgetOptions: {
        // columns to make editable (zero-based index)
        editable_columns: "0-4",
        // press enter to accept content, or click outside if false
        editable_enterToAccept: false,
        // accepts any changes made to the table cell automatically
        editable_autoAccept: true,
        // auto resort after the content has changed.
        editable_autoResort: false,
        // return a valid string: 
        // function(text, original, columnIndex){ return text; }
        editable_validate: null,
        editable_focused: function(txt, columnIndex, $element) {
          // $element is the div, not the td
          // to get the td, use $element.closest('td')
          $element.addClass('focused');
        },
        editable_blur: function(txt,...