InlineEditList

Organism

A list whose rows edit in place: add, edit, remove and reorder, all from the keyboard, with a validation message per row and an async save state per row. Controlled: every change goes through onChange(next, change); return a promise to show saving, reject to show the row's error.

Preview

eu-west
us-east
ap-south

Code

<InlineEditList items={items} onChange={(next) => setItems(next)} validate={validate} />

Preview

eu-west
us-east
ap-south

Code

<InlineEditList items={items} onChange={async (next) => { await save(next); setItems(next); }} />

InlineEditList

Synchronous

Async save (type "fail" to see an error)