shadcn.io is not affiliated with official shadcn/ui
Autosave Inline Edit CRUD Block for React
A volunteer sheet whose rows are always inputs and save themselves when you leave them, each with a status cell (Saving, Saved, or Not saved with the reason and Retry), a counts strip, a blank row to add and a Remove that leaves Undo.
Installation
Overview
Spare people a Save button, with this autosave inline edit table for React with Base UI. A native table of seven volunteers has a name Input, a shift Native Select and a phone Input in every row, and leaving a row saves it after a short wait. The status cell tells the story with a word and a glyph: a spinner and Saving, a check and Saved, or Not saved with the reason beside a Retry Button (the row keeps what was typed). A strip of counts above the table, Saved, Saving, Not saved and Volunteers, follows every row. Add a volunteer, an outline button in the header, appends a blank row that saves once it has a name; the trash leaves a placeholder row, "Removed Mina Das.", with Undo. A name is required and a phone, when given, has ten digits. The table sits in a frame of fixed height, ruled by Guides, with a single polite status line below it, and no Shine Button: the rows commit on their own. For rotas, rosters, price lists and any sheet that people fill in quickly.
FAQ
How do I fill it with my rows?
Edit START: each volunteer has a name, a phone and a shift taken from SHIFTS. Every row keeps its last saved values and what is typed now, so a failed save never loses the text, and the counts above the table are derived from the rows' states. New ids come from a counter in state.
When does a row save, and what is the wait?
When focus leaves the row, not between its own fields, and Enter in a field of the row does not save early. The row then shows Saving for 0.6 seconds, one bounded timer that is cleared if the block unmounts and skipped altogether when the visitor prefers reduced motion, and then Saved or Not saved. Typing in a row again returns it to a quiet "Not saved yet" until you leave it.
What does a failed save look like?
The status cell reads Not saved with a Retry button, the reason sits under it ("the phone needs 10 digits" or "the name is empty") in a line that is always there, and the invalid field is marked. The polite line says it as well. Retry runs the same check on the text in the row, so fix the phone and press it, or just leave the row again.
How do Remove and Undo work?
The trash turns the row into a placeholder of the same size that says who was removed and holds an Undo button, which takes focus. Undo brings the row back in its place with what was typed. Removing several rows leaves several placeholders, each with its own Undo; if nobody is left on the sheet, an empty state says so below them.
What stays local, and how do I wire a real save?
Saving only sets state in this tab after the wait; nothing is sent and a reload restores the seven volunteers. In your app replace the timer in save with a request, set the row to Saving when it starts and to Saved or Not saved from the response, and send the server's reason as the row's error. Cancel the request if the row is removed.