UI
← Home

Spreadsheet

An Excel-class grid composing 2-D rectangular range selection with in-cell editing. Shift+Arrow extends the selection and Ctrl/Cmd+A selects all; Enter, F2, or a double-click edits the focused cell (Enter commits, Escape cancels), and arrow keys while editing move the caret rather than the selection.

  • Axe
  • Name
  • Roving
  • Focus
  • Copy
  • Paste
  • Rename

Preview

A1
B1
C1
A2
B2
C2
A3
B3
C3

Installation

npx shadcn@latest add https://ui.publictheta.com/r/spreadsheet.json

Conformance

Verified against the @publictheta/ui-spec spreadsheet specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe No WCAG 2 A/AA axe-core violations
  • Name The widget container exposes an accessible name
  • Roving Exactly one tab stop; Arrow keys move within the widget
  • Focus A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
  • Copy Cmd/Ctrl+C puts what is selected on the clipboard in every flavour the widget promises — and a touch device, which has no command key, can do the same thing with a control
  • Paste A paste lands: the widget takes the richest flavour it understands, never injects markup it did not ask for, and pastes as plain text on Shift+Cmd/Ctrl+V
  • Rename F2 opens an editor over the value with its text selected; Enter or a blur commits, Escape puts the old name back, Ctrl/Cmd+Z takes the rename back — announced, and reachable by a control as well as by the key

See the full conformance matrix across all components.