Data Grid
A data grid with two-dimensional keyboard navigation: a single roving tabindex moves cell-to-cell with the arrow keys across the header and data rows, Home/End jump within a row, and Ctrl/Cmd+Home/End to the grid corners. Delete removes the row and Ctrl/Cmd+Z puts it back. Editing is a mode of the same grid: with `editable`, Enter / F2 / a double click opens an editor over the cell (Enter commits, Escape restores) and ⌘X / ⌘V clear and fill cells — and a frozen header row and first column stay pinned while it scrolls.
- Axe
- Name
- Roving
- Focus
- Copy
- Paste
- Rename
- Remove
Preview
Name
Size
Kind
Report.pdf
2 MB
PDF
Photo.jpg
4 MB
Image
Notes.txt
1 KB
Text
Movie.mp4
20 MB
Video
Installation
npx shadcn@latest add https://ui.publictheta.com/r/data-grid.jsonConformance
Verified against the @publictheta/ui-spec data-grid 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
- Remove — Delete takes it away and Ctrl/Cmd+Z puts it back where it was, announced — and focus lands on what takes its place rather than on the page body, where the undo could no longer be pressed
See the full conformance matrix across all components.