Components

Editable Cell

A value edited in place: shows the value, swaps in any editor on click or Enter.

RentNote

Import

import { EditableCell } from '@rinzai/zen';

API reference

<EditableCell>

A value edited in place, e.g. in a table cell: shows `children` as a button, and on click (or Enter) swaps in your editor. Call `close()` from the editor when it's done (committed or cancelled). Works with any editor: a compact MoneyInput, an Input, a Select.

Prop	Type	Default
`children`Required What the cell shows when not editing.	`ReactNode`	`—`
`editor`Required The editor to show while editing; call `close` when it's done.	`(close: () => void) => ReactNode`	`—`
`className`	`string`	`—`
`editing` Control the editing state yourself (with onEditingChange).	`boolean`	`—`
`label` Accessible name of the value, e.g. "Rent, Oct 2026: ₹18,500"; " Edit" is added for the button.	`string`	`—`
`onEditingChange`	`((editing: boolean) => void)`	`—`
`readOnly` Show the value without making it editable.	`boolean`	`false`
`title`	`string`	`—`