Inline Edit Table Row

ProNew

A table where a pencil turns one whole row into fields for all its columns, with Save, Cancel, Enter and Escape and the other rows left alone.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this when records have several related columns that are usually changed together (a price list, a rota, an inventory table).

Do not use it when people only ever change one cell (use Inline Editable Cell) or the record has too many fields for a row (open a side panel).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`rows`	`ProductRow[]`	required	-
`onSave`	`(row: ProductRow) => void \| Promise<void>`	required	-

Accessibility

Pencil buttons are named after their row and are disabled while another row is being edited.
Enter saves and Escape cancels from every field; focus returns to the pencil.
Validation messages are in the table caption with role=alert and the invalid field has aria-invalid.

Testing

The pattern ships with a Testing Library test (inline-edit-table-row.test.tsx) that covers one row at a time, saving with Enter, validation and cancelling.

Guide and examples

When to use it

Use this when records have several related columns that are usually changed together (a price list, a rota, an inventory table).

Do not use it when people only ever change one cell (use Inline Editable Cell) or the record has too many fields for a row (open a side panel).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`rows`	`ProductRow[]`	required	-
`onSave`	`(row: ProductRow) => void \| Promise<void>`	required	-

Accessibility

Pencil buttons are named after their row and are disabled while another row is being edited.
Enter saves and Escape cancels from every field; focus returns to the pencil.
Validation messages are in the table caption with role=alert and the invalid field has aria-invalid.

Testing

The pattern ships with a Testing Library test (inline-edit-table-row.test.tsx) that covers one row at a time, saving with Enter, validation and cancelling.