logo svelte /headless table v6.0.13
FIG-001/ EDIT

inline edit.

Cells render through a custom EditableCell component that swaps a <span> for an <input> on click. Press Enter (or the ✓ button) to commit the new value into the writable data store; Escape (or ✗) reverts.

  • The cell renderer is an ordinary Svelte component handed to createRender — it owns its own focus state and writes back via a callback prop.
  • Edits flow into the same writable store the table reads from; the table re-renders automatically through the reactive data subscription.
  • Enter commits and exits, Escape reverts. Add your own keyboard navigation by wiring HTMLInputElement events inside the cell renderer.
↩ all examples
pattern · editable cells mode · live running source
Name
Info
First Name
Last Name
Age
Status
Visits
Profile Progress
category · edit
sheet · sheet 01 / 01
⟳ to re-run

Editable Table