The QuickEdit plugin provides a new mode for DataTable where all values in the table can be edited simultaneously, controlled by the column configuration. Each editable cell contains an input field. If the user decides to save the changes, then you can extract the changed values by calling dt.qe.getChanges().

For a column to be editable in QuickEdit mode, the column configuration must include quickEdit. The contents of this object define the column's behavior in QuickEdit mode.

To move up or down within a column while in QuickEdit mode, hold down the Ctrl key and press the up or down arrow.

If a column should not be editable, but needs to be formatted differently in QuickEdit mode, then you must define qeFormatter in the column configuration. This is simply a normal cell formatter function that will be used in QuickEdit mode. The static functions readonly*Formatter provide examples.

The following configuration can be provided as part of quickEdit:

changed

Optional. The function to call with the old and new value. Should return true if the values are different.

formatter

The cell formatter which will render an appropriate form field: <input type="text">, <textarea>, or <select>.

validation

Validation configuration for every field in the column.

copyDown

If true, the top cell in the column will have a button to copy the value down to the rest of the rows.

The following configuration can be provided as part of quickEdit.validation:

css

CSS classes encoding basic validation rules:

yiv-required

Value must not be empty.

yiv-length:[x,y]

String must be at least x characters and at most y characters. At least one of x and y must be specified.

yiv-integer:[x,y]

The integer value must be at least x and at most y. x and y are both optional.

yiv-decimal:[x,y]

The decimal value must be at least x and at most y. Exponents are not allowed. x and y are both optional.

fn

A function that will be called with the DataTable as its scope and the cell's form element as the argument. Return true if the value is valid. Otherwise, call this.qe.displayMessage(...) to display an error and return false.

msg

A map of types to messages that will be displayed when a basic or regex validation rule fails. The valid types are: required, min_length, max_length, integer, decimal, and regex. There is no default for type regex, so you must specify a message if you configure a regex validation.

regex

Regular expression that the value must satisfy in order to be considered valid.

Custom QuickEdit Formatters

To write a custom cell formatter for QuickEdit mode, you must structure the function as follows:

function myQuickEditFormatter(o) {
  var markup =
    '<input type="text" class="{yiv} quickedit-field quickedit-key:{key}" value="{value}"/>' +
    '{cd}' + Y.Plugin.DataTableQuickEdit.error_display_markup;

  var qe = o.column.quickEdit;
  return Y.Lang.sub(markup, {
    key: o.column.key,
    value: o.value.toString().replace(/"/g, '"'),
    yiv: qe.validation ? (qe.validation.css || '') : '',
    cd: QuickEdit.copyDownFormatter.call(this, o)
  });
};

You can use textarea or select instead of input, but you can only create a single field.

extractMyEditableValue does not have to be a separate function. The work should normally be done inline in the formatter function, but the name of the sample function makes the point clear.