Tables that calculate
Excel-style data grid primitives — cells that know their type, headers that sort and freeze, a formula bar that suggests functions, selection overlays with autofill, conditional formatting, data validation, find/replace, sheet tabs, right-click menu, and a pivot builder. Tuned for the Mufflermen parts ledger and quote totals worksheet.
Tables that calculate is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Tables that calculate: Excel-style data grid primitives — cells that know their type, headers that sort and freeze, a formula bar that suggests functions, selection overlays with autofill, conditional formatting, data validation, find/replace, sheet tabs, right-click menu, and a pivot builder. Tuned for the Mufflermen parts ledger and quote totals worksheet.
Pick a primitive
Every primitive renders at full scale in its own sub-route with realistic Oak Flats data — parts price ledger, quote totals, supplier validation rules. Composition lives under /full-grid.
Spreadsheet cell
Single grid cell, type-aware (text / number / currency / date / formula) with double-click edit mode, selected, and focused states.
Inspect primitive statesColumn header
A1 letter header with sort indicator (asc / desc / none), filter chip popover, resize handle, and freeze toggle.
Inspect primitive statesRow header
Row-number header with selected highlight, freeze toggle, and bottom height-resize handle.
Inspect primitive statesFormula bar
Top formula bar — A1 cell-ref chip, fx mono textarea, commit / cancel actions, and a six-function quick helper rail.
Inspect primitive statesFrozen divider
Visual divider showing the freeze boundary — sticky shadow line + tone-coded plate (amber / teal / red).
Inspect primitive statesCell selection overlay
Marching-ant rectangle over a range with a labeled plate (A1:C6 · 18 cells) and a corner autofill drag handle.
Inspect primitive statesCell merge indicator
Merge / unmerge action card shown when a range is selected — shows kind (horizontal / vertical / block) and cell count.
Inspect primitive statesConditional formatting rule
Rule editor — condition operator, value, format kind (background tone / text color / icon set / data bar), and scope chip.
Inspect primitive statesData validation card
Per-column validation rule — type (List / Range / Regex / Date / Custom formula), expression, error message, reject-invalid toggle.
Inspect primitive statesFind / replace bar
Slide-out find / replace — find input, replace input, case toggle, scope chip (Sheet / Workbook / Selection), Replace + Replace all.
Inspect primitive statesSheet tab rail
Bottom rail of sheet tabs with active highlight, reorder arrows, options popover, badge count, and add-sheet chip.
Inspect primitive statesCell context menu
Right-click menu — Cut / Copy / Paste / Paste special / Insert row + column / Delete row + column / Format / Comment.
Inspect primitive statesAutofill drag handle
Small corner handle used by selection overlay — three sizes, optional pulse, drag-start callback for series fill.
Inspect primitive statesPivot quick builder
Quick pivot — source range chip, available fields, four drop zones (Rows / Columns / Values / Filters), chips per zone.
Inspect primitive statesFull grid composition
Every primitive assembled into a single working sheet — formula bar on top, header row, row headers, cells with selection overlay, sheet tab rail bottom, conditional formatting rule + data validation rule on the side rail.
Review full composition