Inline Cell Input
thilo custom
Click-to-edit text cell for table rows. 3 states: idle → selected → editing. Enter to save, Escape to cancel.
@/components/ui/inline-cell-inputIn context — click Title or Assignee to edit
| ID | Title | Status | Priority | Assignee |
|---|---|---|---|---|
| T7A3763 | Fix login redirect loop | Open | High | Dragana V. |
| T7A3801 | Update ticket filter panel | In Progress | Normal | Marko K. |
| T7A3820 | Export tickets to CSV | In Review | Low | Jovana B. |
Click once to select, click again or start typing to enter edit mode. Tab moves to the next editable cell.
Standalone
Click to edit this value
Current value: Click to edit this value
States
| State | Description | Token / attribute |
|---|---|---|
| Idle | Displays the current value. No border visible. | text-foreground, no ring |
| Selected | First click — row is selected, value highlighted with a subtle ring. | ring-1 ring-primary/20 |
| Editing | Second click or typing — contentEditable active, full ring. | ring-1 ring-primary, contentEditable=true |
Density variants
| density | Preview | class | Usage |
|---|---|---|---|
| compact | Sample value | py-1 | Dense toolbars, notification lists, compact table variants |
| default | Sample value | py-2.5 | Standard ticket table rows — the default |
| relaxed | Sample value | py-4 | Forms with spacious layout, detail panels |
Props
| Prop | Type | Description |
|---|---|---|
| value | string | Current display value |
| onSave | (value: string) => void | Called when user presses Enter or clicks away — only fires if value changed |
| density | "compact" | "default" | "relaxed" | Controls vertical padding of the cell. Default: "default" |
| className | string | Additional classes on the wrapper div |
Uses contentEditable (not a native input) for zero-layout-shift editing. For field rows outside tables, use HorizontalField instead.
On this page