Grid Text Editor

ProNew

An in-cell text editor: Enter saves and moves down, Tab saves and moves on, Escape cancels, leaving saves, and a failed check keeps it open with an alert.

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 it as the editor for text cells. The grid decides what happens after the commit through the nav value.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/grid-text-editor

Usage

Props

Prop	Type	Description
`value`	`string`	Starting text.
`label`	`string`	Accessible name.
`onCommit`	`(value, nav) => void`	nav is down, next, previous or none.
`onCancel`	`() => void`	Escape.
`validate`	`(value) => string \| null`	A message blocks the commit.

Accessibility

The input is focused and selected on open, named by label, and gets aria-invalid with a role alert message when validation fails.
Blur saves like Enter, once only, so a click elsewhere never loses the edit.