Pricing Plan Editor With Per-Row Edit Mode and Inline Validation

Purpose

A per-row edit-mode data grid for billing, revenue, and product teams that maintain a small pricing catalog: the whole table stays read-only until you check out a single plan with Edit, that row's fields become inline editors bound to one draft, and Save or Cancel commits or reverts that row on its own. There is no always-live cell editing, no global save bar, and no bulk selection. It is the row-scoped, one-at-a-time counterpart to a spreadsheet-style grid.

Best Fit

• pricing and packaging plan editors
• rate cards, tier tables, and subscription plan management
• any admin grid where a row is a record that should be edited and committed as a unit
• catalogs where users expect an explicit Edit, then Save or Cancel, per row

Main Pieces

• a ReUI Frame shell (FrameHeader, FramePanel, FrameFooter) whose muted backdrop frames the grid as an inset panel, with a title zone above and a summary footer below
• header controls: a Visibility filter and an Add plan action, both locked while a row is being edited
• a ReUI DataGrid with one row per plan; each row shows read-only values until it is checked out
• per-row edit mode: Edit turns that row into inline editors (text for name, numeric for price, seats, and trial, Select for audience and visibility, a live Switch for featured), and the action cell swaps to Save and Cancel
• a left accent bar marks the checked-out row, and every other row's Edit is disabled so only one plan edits at a time
• inline validation across the whole row: Save is blocked while any field is invalid, and each message renders under its input in a reserved slot
• a footer that summarizes plan count and public count, or names the row being edited while locked
• row actions for duplicate and delete, both opening the copy in edit mode or confirming with an AlertDialog

Editing Model

• The whole grid is read-only by default. startEdit snapshots one plan into a single string-based draft; only that row renders editors, and editingRowId plus isLocked keep every other row and the toolbar disabled until the draft resolves.
• Editing handlers and the draft are threaded into cells through TanStack table.options.meta, so the column definitions never rebuild and the checked-out row's inputs stay controlled by the one draft.
• Numeric fields are held as raw input text in the draft so an in-progress value is never lost to an early parse; draftToPlan converts them back to numbers only on a validated Save.
• Save commits that row immediately into rows and clears the draft; Cancel discards the draft and, for a row added or duplicated in this session, removes it. Each row is its own commit; there is no working-versus-saved diff and no batch save.

shadcn Primitives Used

• Button
• Input
• Select
• Switch
• DropdownMenu
• AlertDialog
• Tooltip

ReUI Primitives Used

• Frame
• DataGrid
• DataGridContainer
• DataGridScrollArea
• DataGridTable
• DataGridColumnHeader
• Badge

Third-Party Libraries

• @tanstack/react-table for the core row model, stable row ids, and the cell meta channel
• sonner for preview-safe save feedback

How To Use

1. Replace PLANS, PLAN_AUDIENCES, and PLAN_VISIBILITIES with your real catalog and option sets.
2. Keep raw price, seats, and trialDays as numbers in the data; format only in the cells.
3. Reuse the validators (validatePlanName, validatePrice, validateSeats, validateTrialDays) or extend them per field; Save stays disabled while any returns a message.
4. Wire the saveEdit commit to your billing API and keep local state as the source of truth for read rows.
5. Keep the editing handlers and the draft on table.options.meta and read them with the PlanTableMeta type inside cells.

What Not To Do

• Do not make cells always editable or add a global save bar; the point of this block is one row checked out at a time and committed on its own.
• Do not move editing state into the column factory closure; it forces a column rebuild on every keystroke. Use the meta channel.
• Do not let a second row enter edit mode while one is open; the lock keeps a single draft honest.
• Do not commit an invalid row; the validators must gate Save and the messages must render.
• Do not store the numeric drafts as numbers while typing; keep them as text and parse on Save.
• Do not copy real plan prices, seat caps, or product names into this block.

Real Data Integration

Back each row with a stable id, name, code, audience, price, seats, trialDays, visibility, and featured flag. For server-backed editing, send one update per Save carrying just that row, reconcile the returned record into local state, and surface server validation errors through the same inline slots. Because each row commits independently, optimistic updates and per-row retries are natural.

LLM Guidance

Use this block when the user asks for a row-edit or edit-in-place data grid, a pricing plan or tier editor, a rate card, or any table where a record is edited and saved as a unit rather than cell by cell. Preserve the per-row edit mode, the single draft on the meta channel, the one-row lock, the gating validators, the ReUI Frame shell, and the summary footer unless the brief changes the record shape or the editing model. This is deliberately distinct from the always-live-cell, global-save-bar editing grids in this family.