shadcn.io is not affiliated with official shadcn/ui
Row Actions Table Block for React Aria
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 React Aria. 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. React Aria renders this catalog table as a grid, so arrow keys move between cells and the first column is its row header.