Floating Cell Editor

A grid cell's editor that opens over the cell instead of inside it, with the cell's own face still showing and the page locked behind.

Quarterly planning notes

Install

Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Floating Cell Editor before installation. Retain the digest printed by this command.

pnpm exec vegastack-design verify floating-cell-editor

Install with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.

pnpm dlx shadcn@4.21.0 add @vegastack/floating-cell-editor

Run the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.

The same command installs the registry items it composes: @vegastack/popover.

Usage

import { FloatingCellEditor } from "@/components/ui/floating-cell-editor";

<td>
  <FloatingCellEditor
    face={<FieldCellDisplay variant="cell" type="text" value={value} />}
    size="text"
  >
    <FieldCellEditor
      variant="cell"
      type="text"
      label="Name"
      value={value}
      onCommit={save}
      onCancel={close}
    />
  </FloatingCellEditor>
</td>;

An editor that fits its cell stays inline. One that needs more room — a long text, a picker, a date — opens over the cell instead: anchored at the cell's rectangle, reaching 2px past it on every side, at least as tall as the cell and as wide as size says (never over 480px). The cell keeps drawing its resting face underneath, so the grid does not jump.

A DataGrid with editing="floating" does this for its custom editors; use the component alone for an editor that lives outside a grid's slots (a file dialog opened from a cell).

Scope

It anchors to the nearest data-slot="data-grid-cell", td or role="gridcell" around it, and follows that cell when the window resizes.
A full-window layer takes presses and scroll behind the editor. Pinch-zoom always passes (ctrl+wheel, two-finger touch, panning while zoomed in), and a press within 350ms of opening is ignored so the click that opened it cannot close it.
It does not commit or cancel: the editor inside does. onDismiss is for an editor that has no commit of its own on leaving (a picker that saves when something is chosen).

Examples

Over a cell

Quarterly planning notes

API Reference

Prop	Type	Default	Description
`children`*	`React.ReactNode`	—	The editor. It commits and cancels itself.
`face`*	`React.ReactNode`	—	The cell as it rests: it keeps drawing while its editor floats over it.
`className`	`string`	—	The editor surface's extra classes.
`onDismiss`	`(() => void)`	—	The press on the lock that closes an editor which has no commit of its own on leaving — a picker that saves when something is chosen, a file dialog. Leave it unset for an editor that saves a draft when focus leaves it: the press blurs it, and that saves.
`size`	`FloatingCellEditorSize`	`"cell"`	How wide the editor is at least (`floatingCellEditorSize` maps a field type to one).

Data attributes and CSS variables on FloatingCellEditor

Attribute	Values
`data-slot`	`"floating-cell-editor-face"`
`--anchor-height`	CSS custom property
`--anchor-left`	CSS custom property
`--anchor-top`	CSS custom property
`--anchor-width`	CSS custom property
`--editor-min-height`	CSS custom property
`--editor-width`	CSS custom property

floatingCellEditorSize(type) maps a FieldType to a size: text-like types and people text, long text, date-time and file types wide, choices, dates and links picker, everything else cell.

Accessibility

The editor takes its own focus; the surface is not a dialog and adds no role, so the cell's gridcell reads as before.
The lock layer is aria-hidden and has no focus stop.

Key	Action
`Esc`	Closes through the editor's own cancel
`Tab`	Leaves through the editor's own commit

Contract	States tested
Behaviour	`default`, `open`
Accessibility	`labeled`, `browser-accessibility-test`
Visual	`default`, `hover`

Do / Don't

Put it inside the cell it edits and let the editor inside commit and cancel itself.

Don't

Use it for a pop-up that is not tied to a cell; that is a Popover.

On this page