shadcn.io is not affiliated with official shadcn/ui
Quick Actions Table Block for React
A document table whose rows show Rename, Duplicate and Delete icon buttons on hover or focus, with tooltips that name the document and show the key, and a Delete that becomes a quiet row with Undo.
Installation
Overview
Put the common actions where the pointer already is, with this quick actions table for React with Base UI. A framed panel inside an inset frame holds a native table of eight documents from a team library (name, kind, size, last edit and who can see it). Each row ends in three icon buttons, Rename, Duplicate and Delete, that appear when the row is hovered or has focus inside it, and are always there on a touch screen and on a phone. Each has a Tooltip that names the document and shows its Kbd key (R, D and Backspace), and those keys work while focus is on a row's buttons. Rename turns the name into a field (Enter saves, Escape cancels), Duplicate adds a copy under the row, and Delete turns the row into a quiet "Deleted. Undo" line: its other cells go unseen, the row never leaves or changes height, and Undo puts it back. One polite line says what each action did. It's built from Button, Tooltip, Kbd, Input, Badge, Frame and Guides, with a CSS entrance only. For file lists, asset libraries and any table where the next click is usually the same few verbs.
FAQ
How do the buttons appear, and do touch users get them?
They fade in on group-hover and group-focus-within of the row, so a keyboard user sees them as soon as Tab lands on the first one. On a touch screen ((hover: none)) and below the small breakpoint they are simply always visible, since there is no hover to wait for. They are real buttons in the tab order the whole time, named after their row ("Rename Roadmap draft").
Which keys work, and where?
R renames, D duplicates and Backspace deletes, but only while focus is on one of that row's three buttons, so typing elsewhere never triggers anything. The tooltip on each button shows its key, and the foot line under the table says the same on larger screens. Phones hide the keys, since there is no keyboard to press them.
What does Delete do, and how does Undo work?
Delete never removes the row. The row's cells go unseen and its name cell says "Deleted" with an Undo button, which takes focus, so the table keeps its height and nothing jumps. Undo restores the row in its place and returns focus to its Rename button. Wire Delete to a soft-delete request and keep the Undo until it can no longer be reversed.
Why is the table in a fixed frame?
Duplicate adds a row (the demo holds twelve at most), and a fixed-height region with a sticky head lets the copies scroll instead of making the panel taller. A new copy takes focus on its Rename button, and the region scrolls to keep it in view.
Is it accessible?
It's a real table with a caption, headers and the name as each row header. The icon buttons have names, the tooltips are reachable by keyboard focus, and one polite status line, present from load, reports each action ("Renamed Roadmap draft to Roadmap v2 in this demo."). Status is a word and a dot, never colour alone.
Related
- Pro
Row Menu Table
Select and actA drafts table where every row has a three-dot menu named after it, with View, Edit, Duplicate, a Shared with team checkbox item, Archive and a destructive Delete that confirms in an alert dialog, shown open in place.
- Pro
Row Actions Table
Select and actA task table with one state-advancing button per row, Start then Mark done then Reopen, that shows a pending spinner, updates the status, the counts and a polite line, and returns focus to the row.
- Pro
Bulk Actions Table
Select and actA contacts table whose head checkbox ticks the page, a strip that offers to select all 48 contacts across pages, a toolbar that swaps to Archive, Tag and Delete at the same height, and an Undo receipt.
- Pro
Row Selection Table
Select and actA stock list with a checkbox on every row, a head checkbox that shows a dash when only some are ticked, Shift-click range select and a live line that adds up the price of the ticked rows.
- Pro
Inline Cell Editing Table
Edit in placeA shop price list whose price and stock cells turn into a field in place, with Save, Cancel, Escape, a reserved line for the reason a value is refused and Undo.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.