shadcn.io is not affiliated with official shadcn/ui
Inline Cell Editing Table Block for React
A shop price list whose price and stock cells turn into a field in place, with Save, Cancel, Escape, a reserved line for the reason a value is refused and Undo.
Installation
Overview
Let people fix a number where they read it, with this inline edit table for React with Base UI. Six products of a small shop sit in a native table, and the Price and Stock cells are catalog Editable fields: each value has a pencil that shows on hover and on focus, and pressing it, or pressing Enter on it, turns the value into a field in the same box with Save and Cancel beside it. Enter saves, Escape puts the old value back, and only one cell is open at a time. A price must be above zero and stock a whole number, and the reason shows in a line that is always there under the cell, so rows never change height. Every save is announced and an Undo button in the header steps back one change at a time. On a phone each product becomes a small card with the whole width to edit in. It's built from Editable, Button, Badge and Guides. For price lists, stock sheets, rate cards and any table where a few cells change often.
FAQ
Which keys edit, save and cancel?
Tab to a pencil and press Enter or Space to open the field. Enter saves, Escape or the Cancel button puts the old value back, and the focus returns to the pencil. Clicking the value itself also opens it. Pressing anywhere outside the open field cancels it, which is why only one cell can be open at a time.
How is a bad value handled?
While you type, the text is checked: a price must be a positive amount with at most two decimals, and stock a whole number from 0 up. The reason appears in a line under the field that is always reserved, the Save button waits, and the field is marked invalid for assistive technology. If you press Enter anyway, the saved value stays and the status line says why it was not saved.
How does it work without a mouse hover?
The pencil is only hidden where the device can hover. On a touch screen it stays visible, and on any device it appears the moment it takes keyboard focus. The value itself is also a tap target.
What happens on a phone?
Below the medium breakpoint each product turns into a card: the name with its SKU and category, then a Price line and a Stock line, each with the full card width for the field and its buttons. Nothing scrolls sideways at 320 pixels.
How does Undo work?
Each save pushes the list as it was onto a stack, and Undo pops it and says what it undid. Undo is always on the page; it reads as quiet and answers "Nothing to undo." until a change has been saved.
What stays local, and how do I wire it for real?
Nothing is stored: the products live in this page's state and a reload brings the starting prices back. To save for real, send the id, field and value from the commit handler to your API and apply the result when it returns, keeping the field open and showing the error under it if the request fails.
Related
- Pro
Editable Cells Grid Table
Edit in placeA sales forecast grid where every number is a field, with live row and column totals, a dot on each changed cell, arrow keys and Enter between regions, Undo and Reset.
- Pro
Plan Price Editor Table
Edit in placeA table of subscription plans whose prices you edit in number fields, with monthly recurring revenue, shares, the change against the saved prices and a Save changes button.
- Pro
Table With a Summary Footer Chain
Totals and comparisonA hire quote whose footer works down from the subtotal through a percentage discount, a tax rate, a flat delivery charge and the total, each showing its formula.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.
- Pro
Basic Info Account
ProfileThe identity fields of an account as ruled rows that edit in place: full name, a username checked against taken names, an email that stays unverified until confirmed, a masked phone and a date of birth.
- Pro
Keyboard Navigable Data Grid
Edit in placeA spreadsheet-like sprint tracker in a fixed window, a grid with one tab stop that moves with arrows, Home, End and Page keys, edits with Enter and cancels with Escape.