shadcn.io is not affiliated with official shadcn/ui
Row Actions Table Block for React
A 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.
Installation
Overview
Give every row one clear next step, with this row actions table for React with Base UI. A framed panel opens with a strip of three cells that count a sprint's tasks by status (To do, In progress, Done), over the catalog Table of seven tasks from a team's tracker: title, assignee, status badge, due date and a button. The button is the row's next step: Start on a task not yet begun, Mark done on one in progress, Reopen on a finished one. A press puts it in its pending state, a spinner with aria-busy and disabled, for 0.9 seconds (at once under reduced motion), then the status changes, the strip's counts and "2 of 7 done" follow, a polite line says what happened ("Task 4 marked done. 3 of 7 done.") and focus returns to that row's button with its new label. Every cell holds text, a Badge or a Button, so the catalog table is enough. On a phone the status sits under the title and the assignee and due date fold away. It's built from Table, Button, Badge, Avatar and Guides, with a CSS entrance only. For task lists, approval queues and any table where each row moves through a few states.
FAQ
How do I change the steps or add a state?
The cycle is three small constants: AFTER says which state a press leads to, STEP_LABEL is the button's word in each state and DONE_LINE the phrase the polite line uses. Add a state to the union, give it a label, a dot in dotOf and an entry in each constant, and the strip, badges, buttons and line all follow.
What happens during the pending state?
The button keeps its width and shows a spinner, is marked busy and is disabled, so it can't be pressed twice, and the polite line says "Working on task 4." A bounded timer of 0.9 seconds then applies the change; it is cleared if you leave the page and skipped entirely when the visitor prefers reduced motion. Replace the timer with your request and apply the status when it answers, showing an error in the same line if it fails.
Where does focus go?
A disabled button drops focus, so when the change lands focus returns to the same row's button, which now has its next label, and a keyboard user can press it again to move the task along. Other rows stay pressable while one is pending.
Is it accessible?
Every button is named by its row ("Mark done: Review the pricing page copy"). Status is a word and a dot, never colour alone, and the counts are real text. One polite status line, present from load, reports each press and the new progress.
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 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
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
Copy Cell Table
Select and actA table of discount codes where each code is a button across its whole cell that copies it to the real clipboard and says Copied for two seconds, with a Copy all in the head and a foot line that counts what was copied.
- 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.