shadcn.io is not affiliated with official shadcn/ui
Row Menu Table Block for React
A 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.
Installation
Overview
Give every row a menu with everything you can do to it, with this row menu table for React with Base UI. A framed stage holds a native table of drafts from a writing app (title, day edited, word count and status), and every row ends in a three-dot Button named after it ("Actions for Q3 plan") that opens a Dropdown Menu: View, Edit and Duplicate, then a separator, a "Shared with team" checkbox item and Archive (Restore on an archived draft), then another separator and Delete in the destructive style. Delete asks first in an Alert Dialog whose focus starts on Cancel; confirming removes the draft and moves focus to the next row's menu. On load the second row's menu is drawn open in place, so the page shows what the menu offers without trapping focus; pressing any row's button opens the real menu. One polite line says what each choice did. It's built from Dropdown Menu, Alert Dialog, Button, Badge and Guides, with a CSS entrance only. For document lists, admin tables and any row with more actions than room.
FAQ
What is the menu doing open on load?
That is the preview's part, not the block's. On load the second row's menu is drawn in place as a native non-modal dialog under its button, wearing the menu's own skin, so nothing is trapped or focused. Pressing any row's button opens the real menu, with the library's focus handling and Escape, and the drawn copy stays closed until a reload. In your app keep only the real DropdownMenu and delete the "in-place" state, its dialog and the Escape effect.
How does the Shared with team checkbox item work?
It is a menu item with a state: pressing it toggles whether the draft is shared and the menu stays open or closes as the library does by default. The choice is stored per draft, so reopening the menu shows the current state, and the polite line says it ("Q3 plan is shared with the team").
What does Delete do, and where does focus go?
Delete is the only destructive item, drawn in the destructive style, and it never acts at once: it opens an alert dialog that names the draft and its word count. Cancel takes first focus and returns focus to that row's menu button; confirming removes the draft and moves focus to the next row's menu button, or the previous one when it was the last row.
Is it accessible?
Every menu button is named by its row, the menu has the library's keyboard model (arrow keys, Home and End, type-ahead, Escape) and the drawn copy is a named dialog of real buttons you can Tab through. Status is a word and a dot, never colour alone, and one polite line, present from load, reports each choice.
How does it look on a phone?
The table keeps the title with its status and day under it and the menu button at the end; Edited, Words and the status column fold away. The menu is as wide as the screen on phones, and the drawn copy spans the stage.
What stays local?
Everything: the six drafts are typed in DRAFTS, and sharing, archiving, copying and deleting only change this component's state. View and Edit say they would open the draft and that nothing opens in the demo. Replace the handlers with calls to your API and keep the polite line for the result.
Related
- Pro
Quick Actions Table
Select and actA 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.
- 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
Export Table
Select and actA sales table with a search and row checkboxes and an Export dialog that asks which rows (visible, selected or all, with counts), whether to include hidden columns and a file name, then downloads a real CSV, shown open in place.
- 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.