bootstrap-table/site/docs/extensions/editable.md

---

layout: docs title: Table Editable description: Table Editable extension of Bootstrap Table. group: extensions

toc: true

Use Plugin: x-editable

Usage

{% highlight html %} {% endhighlight %}

Options

editable

• Attribute: data-editable

• type: Boolean

• Detail:

Set false to disabled editable of all columns.

• Default: true

Column options

alwaysUseFormatter

• Attribute: data-always-use-formatter

• type: Boolean

• Detail:

  Set true to use always the formatter, even if the column was already edited.

• Default: false

editable

• Attribute: data-editable

• type: Object | Function

• Detail:

Configuration of x-editable. Full list of options: http://vitalets.github.io/x-editable/docs.html#editable.

If it is type of Function, it is called with params: index, row, element for each row of the table. It should return Object of the x-editable configuration.

All options can be defined via data-editable-* HTML attributes. Table wide options are used for every column but can be overridden:

{% highlight html %} <table id="my_table_id"

data-url="data/url.json"
data-id-field="id"
data-editable-emptytext="Default empty text."
data-editable-url="/my/editable/update/path">
<thead>
  <tr>
    <th class="col-md-1" data-field="id" data-sortable="true" data-align="center">#</th>
    <th class="col-md-4" data-field="name" data-editable="true">Name</th>
    <th class="col-md-7" data-field="description" data-editable="true" data-editable-emptytext="Custom empty text.">Description</th>
  </tr>
</thead>

{% endhighlight %}

You can use noeditFormatter to disable the editable column, for example:

{% highlight javascript %} {

editable: {
  noeditFormatter (value, row, index) {
    if (value === 'noedit') {
      return true
    }
    return false
  }
}

} {% endhighlight %}

• Default: undefined

Events

onEditableInit(editable-init.bs.table)

Fired when all columns was initialized by $().editable() method.

onEditableSave(editable-save.bs.table)

Fired when an editable cell is saved.

parameters: field, row, rowIndex, oldValue, $el

onEditableShown(editable-shown.bs.table)

Fired when an editable cell is opened for edits.

parameters: field, row, $el

onEditableHidden(editable-hidden.bs.table)

Fired when an editable cell is hidden / closed.

parameters: field, row, $el, reason

The existing problems

• Editable extension does not support searchable in the select type.