# Flux 2.0 — Editable cell A table value that is edited where it is shown, with saving and error states. Reference: https://flux.kaptio.com/components/editable-cell/ Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css ## Use it when Lets someone correct many values without leaving the table: a rate matrix, allocations by date, prices by room type. The value is a button until it is activated, then an input; Enter saves, Escape cancels, and the cell shows that it is saving and, if the save fails, why, with the value still there to fix. ## Do not use it when Not for values that depend on each other and must be saved together; use a form with one Save. Not for long text. Not for the only copy of a value that needs review before it changes; open a Modal with the field and its consequences. ## Markup ### Rate matrix

Hotel Vík, rates per night in ISK. Select a rate to change it.
Room	12 Sep	13 Sep	14 Sep	15 Sep
Double
Twin
Single

### States

State	Double, 12 Sep
View
Editing
Saving	Saving
Error	Below the contracted minimum of 28,000.

## API - flux-editable (class): On the td. data-state is view, editing, saving or error. Add data-numeric for figures. - data-flux-editable (attribute): The cell’s label, such as "Double, 12 Sep", used to name the input. Wires editing. Requires flux-components.js. - flux-editable__value (class): The button. Holds a flux-visually-hidden "Edit : " span and the flux-editable__text span. - flux-editable__text (class): The displayed value. The script reads and writes it. - flux-editable__input (class): Added with flux-input while editing. - flux-edit event (element): Cancelable, dispatched on the cell on save with detail.value, detail.previous and detail.waitUntil(promise). Cancel it to keep the field open. ## Accessibility - Each value is a button whose name says what it edits and what it holds: "Edit Double, 12 Sep: 32,000". - The input is labelled with the cell’s row and column, so it makes sense on its own. - Saving is announced through a status element; an error is bound to the input with aria-describedby. - Keep row and column headers with scope, so a screen reader moving through the grid hears both. ## Keyboard - Enter / Space: On a value, starts editing. - Enter: In the input, saves and returns focus to the value. - Escape: Cancels and returns focus to the value, unchanged. - Tab: Saves and moves to the next cell. ## Tokens - --flux-editable-padding-x | -radius | -border-hover | -saving-text - All --flux-table-* tokens, for the cells. ## Do - Validate on the server and return a message that says what is allowed: "Below the contracted minimum of 28,000." - Keep the attempted value in the field when a save fails, so it can be corrected rather than retyped. - Format figures in the cell the same way before and after editing. ## Do not - Do not save on every keystroke. - Do not show an input in every cell at once. A grid of inputs reads as a form and loses the row rhythm. - Do not mark editable cells with a colour fill. The hover outline and the button are enough.