Skip to content

Inline editing

Robert Hjalmers edited this page Apr 4, 2018 · 2 revisions

Enable inline editing by configuring your table with the field property inlineEdit.

Since version 4.13.0 the inlineEdit property supports observables and/or functions. Pass an object with the following properties:

Name Description Example
active Should table cell be editable? Supports observable or functions that returns a boolean. inlineEdit: { active: (row) => row.editable === 'true'}
type (Optional) by default type will be set to text but could be one of the following number, password, email, text or an array with values (in case of array, the options will be displayed in a dropdown). Type also supports an observable (useful for fetching/updating options from server). inlineEdit: { active: (row) => row.editable === 'true', type: ['true', 'false']}

See live example here.

The original configuration options are still valid see below.

Prior to version 4.13.0

Use inlineEdit: true to turn the cell into a editable input field, by default changes will be submitted using the enter key.

Use an array e.g. inlineEdit: ['first', 'second', 'third'] to present a dropdown with predefined values, changes are submitted as soon as a new option is selected.