shadcn.io is not affiliated with official shadcn/ui
Editable Cells Grid Table Block for React
A 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.
Installation
Overview
Plan numbers the way people do in a spreadsheet, with this editable cells table for React with Base UI. Four regions by four quarters of a forecast, in thousands of dollars, sit in a native table, and every number is an Input that fills its cell. The row totals, the column totals and the grand total are worked out from whatever is typed, a dot marks each cell that differs from the saved forecast, and a strip above the grid says what the saved and the typed forecast come to and how far apart they are, with an arrow, a sign and a word. Arrow Up, Arrow Down and Enter move to the same quarter in the next or previous region. Text that is not a whole number of 0 or more is explained in a line that is always reserved, so nothing moves. Undo steps back one edit and Reset returns to the saved forecast. It's built from Input, Button and Guides. For budgets, forecasts, rate sheets and any grid of numbers people edit together.
FAQ
How do the keys move between cells?
Arrow Down and Enter move to the same quarter in the next region, Arrow Up and Shift with Enter go to the previous one, and the text of the cell you land on is selected so typing replaces it. Left and Right stay in the field, as they do in any text box, and Tab walks along the row. Escape puts the cell back as it was when you entered it.
Why a native table and not the catalog Table?
The catalog Table on React Aria is a keyboard grid that takes the arrow keys for itself, so an input inside it would never see Arrow Up or Arrow Down. A native table with real inputs behaves the same on every target.
What happens to text that is not a number?
While you type, the cell is marked invalid and a line under the grid, always reserved, says why. When you leave the cell its previous text comes back and the status line says so. Totals ignore a cell that is not a number yet, so they never show NaN.
What does Undo undo?
One edit at a time: an edit is one cell whose text changed between entering it and leaving it. Undo restores the earlier text and says which cell it was. Reset clears the whole history and puts every cell back to the saved figure.
How does it work on a phone?
The grid scrolls sideways inside its frame under a pinned Region column, with a line under it that says so. The strip of totals above it stays two by two, and the foot stacks its status line over the Undo and Reset buttons.
What stays local, and how do I wire it for real?
The forecast is typed in the file and the edits live in this page's state; nothing is saved. To use real data, load the saved figures into the region list and send the changed cells from your own save handler: the totals and the dots are derived from the saved figures, so they keep working.
Related
- Pro
Inline Cell Editing Table
Edit in placeA 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.
- 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
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.
- 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
Pinned Columns Table
Columns and pagingA vehicle log of ten columns whose first and last stay pinned while the rest scroll under them, with a shadow that appears only when there is something to scroll under and a switch that turns the pins off.
- Pro
Table Footer With Totals
Totals and comparisonA timesheet table with a real footer row whose totals (hours, average rate, amount, paid and pending) are worked out from the rows shown, so a client filter changes every figure.