jQuery plugin: Tablesorter 2.0 - Content Editable

# tablesorter

## Content Editable

### Flexible client-side table sorting

Back to documentation

### Notes

- This widget can not be applied to the original plugin and requires jQuery 1.7+ and a browser that supports `contenteditable` attributes (almost all modern browsers).
- Important: In Internet Explorer, please wrap the cell content with a DIV or SPAN as it is not possible to make table cells directly contenteditable. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).
- Updated v2.17.6,
  - Fixed the `editable_enterToAccept` option to do what it was meant to do, accept when the user presses enter.
  - Added `editable_autoAccept` option, so that when it is `true` the original behavior of accepting content changes will be maintained.
  - Added `editable_validate` option, to allow validating the edited content.
  - Focus is now maintained within the contenteditable element after updating. This makes it easier to tab through the table while editing. This change also fixes this Stackoverflow issue.
  - The `editComplete` event now passes the table `config` variable to make it easier to access tablesorter variables.
- Updated v2.13.2, because of the limitation in IE, if a table cell contains any DIV or SPAN immediately inside the cell, it will be targeted instead of the table cell itself and made content editable. So, if you don't care about IE support, there is no need to include the extra markup.
- In some browsers, additional CSS is needed to highlight a focused editable table cell. See the CSS block below.
- Pressing escape while editing will cancel any changes.
- In the demo below, click in any of the first three columns to edit the content, except for the cell containing "Peter".
- To prevent a table cell from becoming editable, add the class name `"no-edit"` to the cell. Set by the `editable_noEdit` option.

### When Content Changes are Accepted

| editable_enterToAccept
--- | ---
true | false

editable_autoAccept

true

- Pressing alt-enter
- Pressing enter
- Clicking outside of the current editable content.
- Moving the mouse outside of the current tbody (this is done because if the content editable is still active when the user clicks on the header to sort the column, all sorts of bad things happen).

- Pressing alt-enter
- Clicking outside of the current editable content.
- Moving the mouse outside of the current tbody.

false

- Pressing alt-enter
- Pressing enter

- Pressing alt-enter

* Note The content is only accepted when the `editable_validation` function does not return `false`.

### Options

#### Editable widget default options (added inside of tablesorter `widgetOptions`)

TIP! Click on the link in the function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.

Option | Description
--- | ---

editable_autoAccept

Accepts any changes made to the table cell automatically v2.17.6
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`

editable_columns

Contains an array (or range string) of columns numbers you want to have editable content (zero-based index).

- 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)

editable_enterToAccept | Makes the user press enter to accept the content within the editable table cell if `false`, clicking outside the cell will accept the content. Default value: `true`
editable_autoResort | If `true`, the column will resort (only if already sorted) after the content has been changed. Default value: `false`
editable_noEdit | Class name on table cells to search for that are not to become editable. The search is only done within the columns set by the `editable_columns` option. Default value: `'no-edit'`

editable_editComplete

Event fired after the table content has been edited

    $(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'`

editable_focused

Callback function that is executeed when the contenteditable cell is focused (v2.17.8)
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`

editable_blur

Callback function that is executeed when the contenteditable cell is no longer focused (v2.17.8)
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`

editable_selectAll

Set to automatically select all content when the contenteditable cell is focused (v2.17.8)
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`

editable_validate

Validate the content change (v2.17.8)
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`

editable_trimContent

Trim the content within the editable cell (v2.17.8)
When a table cell is formatted as follows:

    <td>
    	John
    </td>

All carriage returns and tab(s) within the table cell would be included before editing. Once the contenteditable element has focus, the content is cleaned up.
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`

editable_wrapContent

Wrap the editable cell content with this element (v2.17.8)
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 : ''
        }
      });

    });

Default value: `'<div>'`

# Demo

`editable_autoAccept : true`
`editable_enterToAccept : true`

First Name | Last Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | ---
Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM
John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM
Clark | Kent | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM
Bruce | Almighty | 45 | $153.19 | 44% | Jan 18, 2001 9:12 AM
Bruce | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM

# Javascript

# CSS

# HTML