Data Table
One native `<table>` with every capability a table has, in any combination: activate a header to sort it (`aria-sort`, Shift for a composite key), a checkbox column with a tri-state select-all, a `role="separator"` resize handle per column, columns you can pick up and move (Space grabs, the arrows aim, Enter drops), and frozen panes whose header row and row-header column stay pinned as the body scrolls. The column layout and the scroll position are remembered where the host opts in.
- Axe
- Focus
- Copy
- Drag
- Cancel
- Restore
- Reorder
Preview
| Report.pdf | Ada | 2 MB | ||
| Photo.jpg | Image | Cyd | 4 MB | |
| Notes.txt | Text | Bob | 1 KB | |
| Logo.svg | Image | Ada | 12 KB |
Installation
npx shadcn@latest add https://ui.publictheta.com/r/data-table.jsonConformance
Verified against the @publictheta/ui-spec data-table specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.
- Axe — No WCAG 2 A/AA axe-core violations
- 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
- Drag — Pointer-drag surfaces don't select text or hijack touch scrolling
- Cancel — Escape mid-drag (and pointercancel, when the OS takes the gesture) restores the value the drag started from and ends it, so the release commits nothing
- Restore — What the user set is still there after a reload — the pane size, the column widths, the open section, the active tab, the scroll position — but only where the host opted in, and never at the cost of working when storage is unavailable
- Reorder — An item can be moved somewhere else by pointer and by keyboard — Space/Enter grabs, the arrows move, Space/Enter drops, Escape puts it back — with an indicator showing where it would land and every step announced
See the full conformance matrix across all components.