DataTable-AltEditor / Example 14

Rendered controls and inline editing

Change rendered controls directly. Double-click Task to edit its raw text even though it displays in bold. AltEditor skips interactive cells when double-clicking or navigating with Tab and Shift+Tab.

Custom change handlers update DataTables locally so values survive sorting, searching, and redraws. They do not invoke AltEditor save callbacks or validation. Reloading restores the sample data; add your own request and error handling for server persistence. On narrow screens, scroll each table horizontally to reach all controls.

For built-in inline controls and asynchronous save callbacks, see the basic inline editing example.

Form controls

Status uses a select, Quantity a number input, Complete a checkbox, and Note a textarea. Commit text and number changes by leaving the control. Native controls are detected without a column override.

Actions and custom content

Edit the note directly and leave it to save. Try the action button, link, and expandable details. The custom switch supports click, Enter, and Space and explicitly uses inlineEditable: false.

Choose an action.