If the user clicks outside or tabs out of the edited cell, or moves the mouse out of the current tbody, any changes to the cell will be accepted

The only time the content is not accepted is if the user presses the escape key.

if false, the acceptance behavior follows the editable_enterToAccept setting.

Default value: true

• In tablesorter core v2.14.2, this widget was updated to allow passing a range string in this option, i.e. "0-2" instead of [0,1,2].
• contenteditable="true" is added to cells within these columns.

Default value: [] (empty array)

if false, clicking outside the cell will accept the content.

Default value: true

Default value: false

The search is only done within the columns set by the editable_columns option.

Default value: 'no-edit'

$(function(){

  $('#table')
    .tablesorter({
      widgets : ['editable'],
      widgetOptions : {
        editable_editComplete : 'giterdone'
      }
    })
    // use delegated event binding
    .on('giterdone', 'td', function(event, config){
      // this = td; the event bubble up
      console.log( 'new content = ' + $(this).text() );
    });

});

Default value: 'editComplete'

Set this function to manipulate or adjust the content when the content editable is focused

$(function(){

  $('#table').tablesorter({
    widgets : ['editable'],
    widgetOptions : {
      editable_focused : function(txt, columnIndex, $element){
        // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
        $element.closest('td').addClass('focused');
      },
      editable_blur : function(txt, columnIndex, $element){
        $element.closest('td').removeClass('focused');
      }
    }
  });

});

Default value: null

Set this function to manipulate or adjust the content when the content editable is blurred

$(function(){

  $('#table').tablesorter({
    widgets : ['editable'],
    widgetOptions : {
      editable_focused : function(txt, columnIndex, $element){
        // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
        $element.closest('td').addClass('focused');
      },
      editable_blur : function(txt, columnIndex, $element){
        $element.closest('td').removeClass('focused');
      }
    }
  });

});

Default value: null

Set this option to a boolean, or a function that returns a boolean:

• When true, all of the text within the current contenteditable element will be selected.
• When false, no selection is made.
• When this option contains a function, return either true to select all of the text within the element, or false to not select any text.

$(function(){

  $('#table').tablesorter({
    widgets : ['editable'],
    widgetOptions : {
      editable_selectAll : function(txt, columnIndex, $element){
        // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
        // only select everthing within the element when the content starts with the letter "B"
        return /^b/i.test(txt) && columnIndex === 0;
      }
    }
  });

});

Default value: null

Use this function to validate and/or modify the content before it is accepted.

In v2.17.8:

• Set this option to be a global function, or an object containing a column index, or class name of the desired column
• A columnIndex is now included in the function parameters
• A $element parameter has been included which contains the contenteditable element. To get the table cell, use $element.closest('td');

This function must return either a string containing the modified content or false to revert the content back to it's original value. Example:

$(function(){

  $('#table1').tablesorter({
    widgets : ['editable'],
    widgetOptions : {
      // global validate function
      editable_validate : function(txt, orig, columnIndex, $element){
        // only allow one word
        var t = /\s/.test(txt) ? txt.split(/\s/)[0] : txt;
        return t ? t : false;
      }
    }
  });

  $('#table2').tablesorter({
    widgets : ['editable'],
    widgetOptions : {
      // validate function per column
      editable_validate : {
        0 : function(txt, orig, columnIndex, $element){
          // allow up to two words
          var t = txt.split(' ');
          return t.length > 2 ? t[0] + (t[1] ? ' ' + t[1] : '') : txt;
        },
        '.price' : function(txt, orig, columnIndex, $element) {
          // make sure the price column(s) are using a number
          return isNaN( txt.replace(/[$,\s]/g, '') ) ? false : txt;
        }
      }
    }
  });

});

Default value: null

When a table cell is formatted as follows:

<td>
	John
</td>

Carriage returns and tab(s) at the beginning & end of the contenteditable table cells will be removed initially and after editing.

If this option is true, this widget will trim content upon initialization; this is necessary if you need cleaned it up content before editing, like with an autocomplete script.

Use this option as follows:

$(function(){

  $('#table').tablesorter({
    widgets : ['editable'],
    widgetOptions : {
      editable_trimContent : true
    }
  });

});

Default value: true

Internally, the widget uses jQuery's wrapInner to wrap the cell contents, using the following rules:

• If this option is set to false or an empty string (''), then no wrapping will occur. The "contenteditable" attribute will be applied to the table cell.
• If the table cell has no children, then the content is wrapped using this option, and the wrapping element will have the "contentediable" attribute enabled.
• If the cell already has children (one or more) immediately inside of the table cell, no wrapping occurs and the child element(s) that don't have the class name set in editable_noEdit, will have the "contenteditable" attribute enabled.

Note: that this option uses jQuery's wrapInner, so this option can be set to a html string or selector, jQuery object, DOM element, or a function (jQuery 1.4+)

$(function(){

  $('#table').tablesorter({
    widgets : ['editable'],
    widgetOptions : {
      editable_wrap : '<div>'
    }
  });

});

Default value: '<div>'