shadcn.io is not affiliated with official shadcn/ui
Previewed Bulk Edit CRUD Block for Solid
A shop catalogue where you tick products, choose one change (raise a price by a percent, set it, or pick a category or status) and read each product's before and after with a Skip tick before Apply, with Undo.
Installation
Overview
Change many products at once and see the result first, with this bulk edit for Solid with Ark UI. A native table of eight products has a tick on every row and a select-all in the head that turns to a bar when only some are picked; Shift-click picks every product between this one and the last one you picked. Beside it a Change pane names one field in a Native Select (Price, Category or Status) and the operation that fits it: a Segment Group of raise by a percent, lower by a percent or set to an amount for a price, a Native Select for a category, a Segment Group for a status. Under it a preview lists every picked product with its value before and after, a price rounded to the cent, and a Skip tick for each. The foot holds the only Shine Button, "Apply to 3 products", and the status line, which says what was updated and offers Undo. The panel is ruled by Guides, and below the large breakpoint the pane goes under the table with Apply sticking to the bottom. For catalogues, price lists and any grid where one edit touches many rows.
FAQ
How do I fill it with my products?
Edit PRODUCTS: each has an id, a name, a price in whole cents (cents), a category from CATEGORIES and a status from STATUSES. Money is kept as integer cents and the percent maths is rounded to the cent in one place, priceAfter, so a total never drifts by a fraction.
What does the preview show, and what is Skip?
Every picked product with its current value, an arrow and the value it would get. A product the change would not alter (a price set to what it already is) reads as unchanged and is left out of the count. Skip leaves one product out of this apply without unpicking it, and the Apply button counts only what will really change.
What is checked?
A percent must be a whole number from 1 to 90 and a price an amount up to 999.99 with at most two decimals. The reason sits in a line under the field that is always there, the preview shows dashes until it is fixed, and pressing Apply says why nothing happened and moves focus to the field.
What does Undo do?
Apply writes the new values and clears the ticks, then the status line says "Updated 3 products in this demo" with an Undo link. Undo puts every old value back, picks the same products again and moves focus to the first of them. Any later apply replaces the undo, and it undoes only the last change.
What stays local, and how do I wire a real save?
Everything lives in state in this tab and a reload restores the eight products; nothing is sent. In your app send the ids and the change (or the computed new values) in one request from apply, replace the rows with the response, keep the old rows for Undo and show a refusal on the row it names.