shadcn.io is not affiliated with official shadcn/ui
Staged Changes Data Table CRUD Block for Ark UI
A tool library's stock table where adds, row edits and deletions are staged and counted, with a draft row, struck-through deletions you can restore, and one Save changes that moves the baseline.
Installation
Overview
Let people rework a table and decide once, with this staged data table for React with Ark UI. A native table of eight tools (name, quantity, shelf) sits in a frame of fixed height with a sticky head, and nothing is saved until Save changes. Add row, an outline Button in the header, puts a draft row at the top of the table with an Input for the name, one for the quantity and a Native Select for the shelf; Enter or the check commits it, marked New. A pencil turns a row's cells into inputs with Save row and Cancel row, and the trash strikes a row through and keeps it where it is, marked Deleted, with Restore. A name must be filled and unique and a quantity a whole number, with the reason in a line under the field that is always there. The foot band counts the staged changes ("1 added, 2 edited, 1 deleted"), holds the only Shine Button, Save changes, and Discard all, which asks in an Alert Dialog from three changes up. The band is ruled by Guides and sticks to the bottom on a phone. For stock sheets, price lists and any grid edited in one sitting.
FAQ
How do I fill it with my rows?
Edit TOOLS: each has an id, a name, a qty and a shelf taken from SHELVES. The baseline is the last saved list; every mark (New, Edited, Deleted) is computed against it, so editing a value back to what it was removes its Edited mark. New ids come from a counter in state.
What does staged mean here, and what does Save do?
A change is held in the table until you save it. Save changes makes the shown rows the new baseline, drops the rows marked Deleted, clears every mark and says "Saved 4 changes in this demo". It is refused while a row is still open, with a message that names the row. Discard all returns to the baseline and removes the rows you added.
Why does a deleted row stay in the table?
So the table never jumps. A deleted row keeps its box with its text struck through, the word Deleted and a Restore button, and it leaves the table only when you save. Restoring puts the row back without a mark. A row that was added in this sitting and then deleted simply goes, because there is nothing to restore.
What is checked, and when?
A name can't be empty and can't match another row that isn't deleted, ignoring case, and a quantity must be a whole number of 0 or more, up to four digits. The reasons appear under the fields when you try to commit a row, in a slot that is always there, and the first field with a problem takes focus. Sorting, filtering, selecting and paging are the tables blocks' job and are not here.
What stays local, and how do I wire a real save?
Everything lives in state in this tab and a reload restores the eight tools; nothing is sent. In your app send the three lists a save produces, the rows added, the rows edited and the ids deleted, in one request from save, replace the baseline with the response and show a refusal on the row it names.
How does it look on a phone?
The Shelf column goes and each tool shows its shelf under its name; an open row shows the shelf as a select under the name field. The foot band is one node that sticks to the bottom of the screen, so Save changes stays within reach while the table scrolls inside its frame.