shadcn.io is not affiliated with official shadcn/ui
Formula Bar Navbar Block for React
A spreadsheet navbar with a cell reference box and a formula field: jump to a cell, read its contents and value, edit it, and keep or cancel the edit.
Installation
Overview
A formula-bar navbar for React with Base UI, the bar of Rowhurst, a spreadsheet app. The upper row holds the wordmark, the file's name and a Share Shine Button. The lower row is the formula bar: a cell reference box, an fx mark, the formula field and what the cell shows. Type a reference such as B3 or D6 and press Enter to jump to it; the formula field then holds that cell's contents, which can be a number, some text, a sum, average, minimum, maximum or count over a range, or two cells or numbers joined by plus, minus, times or divide. Edit the field and press Enter to change the cell and the readout; Escape puts the stored contents back. A reference outside the sheet says so and keeps the old cell. The bar is 104 pixels high, each row on its own spine, and the dividers in the lower row meet its rule with a plus. It's built from Input Group, Shine Button and Guides, with your theme's tokens for every colour. For spreadsheets, data editors and any tool whose header is the cell being edited.
FAQ
How do I change the sheet's cells?
Edit SHEET at the top: each key is a cell from A1 to D7 and each value is what you'd type into it. COLUMNS and ROW_COUNT set the size, and the cell pattern CELL should match them. The readout is computed from these contents each time, so a formula always follows the cells it points at.
Which formulas work?
SUM, AVERAGE, MIN, MAX and COUNT over a range such as B2:B5, and two operands (cells or numbers) joined by +, -, * or /, such as =B2+C2. Anything else, a cell that refers to itself, a division by zero or a chain more than eight cells deep shows #ERROR. Letters can be any case and spaces are ignored. It's a small evaluator for the demo, not a spreadsheet engine.
How does it work with a keyboard?
Both fields are ordinary text inputs. In the reference box, Enter jumps and Escape puts the current cell back; leaving the box also puts it back. In the formula field, Enter keeps the edit and Escape cancels it; leaving the field drops an unconfirmed edit. Each result is spoken in a polite line: the cell, its contents and what it shows.
Where do the edits go?
Nowhere: they live in state on this page, and reloading brings the sample sheet back. The Share button is a link to #. Point edit at your own store, and keep the polite line, so people hear that the change took.
Related
- Pro
Settings Header Navbar
Two rowsA two-row settings header: the page title and one real edit (a Weekly digest switch) with Discard and Save that wake up when it changes, and a row of section tabs where the dirty one carries a dot and a spoken note.
- Pro
Stacked Double Row Navbar
Two rowsA two-row navbar: utilities on top (Support, Docs, Status, a language menu, an account menu) and the main tabs below, where only the lower row stays stuck on scroll, by CSS alone.
- Pro
Keyboard Shortcuts Navbar
App toolbarsAn app navbar whose shortcuts work: G then H, P or S moves between pages, a question mark opens a dialog with every key in a table, and each link shows its keys on hover and keyboard focus.
- Pro
File Tabs Navbar
App toolbarsAn editor navbar for a browser IDE with closable file tabs, a dot on unsaved files, a branch chip with a changed count and a Run button that saves what changed.
- Pro
Presence Avatars Navbar
Accounts and scopesA shared-document navbar with presence avatars and an editing count, and a Share popover holding the roster, a viewing switch and a link that copies.
- Pro
Field Type Menu Navbar
App toolbarsA form-builder navbar with an Add field menu of nine field types, an Edit and Preview control, and a Publish button that goes through Publishing to Live with a copyable link.