Björk UI

Components•Spreadsheet grid

Spreadsheet grid

A spreadsheet built on the ARIA grid pattern. Arrow keys move the active cell, typing edits in place, Shift extends a range, ranges copy and paste as tab-separated text, and formulas like =SUM(B2:B8) recalculate as you go.

Dependencies

Motion clsx

Copy below cli

npx shadcn add @bjork-ui/spreadsheet-grid

How to use

import {  SpreadsheetGrid,  type SpreadsheetCells,  type SpreadsheetColumn,} from "@/components/bjork-ui/tables/spreadsheet-grid";const columns: SpreadsheetColumn[] = [  { type: "text", width: 160 },  { type: "currency", width: 110 },  { type: "percent", width: 90 },];const [cells, setCells] = useState<SpreadsheetCells>({  A1: "Item", B1: "Cost", C1: "Share",  A2: "Hosting", B2: "4200", C2: "=B2/B4",  A3: "Design", B3: "6800", C3: "=B3/B4",  A4: "Total", B4: "=SUM(B2:B3)", C4: "=C2+C3",});<SpreadsheetGrid  title="Launch budget"  columns={columns}  rowCount={12}  totalRows={[4]}  cells={cells}  onChange={(next) => setCells(next)}/>

FY27 operating budget

Autosaved

FY27 operating budget. Arrow keys move between cells, Shift extends the selection, type or press Enter to edit, Escape cancels.
Row	A	B	C	D	E	F	G	H
1	Line item	Q1	Q2	Q3	Q4	FY27	Share	Notes
2	Cloud infrastructure	$42,800	$44,100	$46,900	$51,200	$185,000	43.5%	Reserved capacity renews Q3
3	Contractors	$18,500	$22,000	$22,000	$16,000	$78,500	18.5%	Design system rebuild
4	Software licenses	$9,640	$9,640	$12,180	$12,180	$43,640	10.3%	Seat count grows in Q3
5	Travel	$6,200	$3,400	$8,900	$4,100	$22,600	5.3%	Offsite in Q3
6	Events	$12,000	$0	$24,500	$7,800	$44,300	10.4%	Fieldnote Summit booth
7	Hardware	$15,300	$2,100	$2,100	$19,600	$39,100	9.2%	Laptop refresh, Q1 and Q4
8	Training	$2,400	$2,400	$3,600	$3,600	$12,000	2.8%	Two cohorts a half
9	Total	$106,840	$83,640	$120,180	$114,480	$425,140	100.0%	Q3 runs over cap
10	Average per line	$15,263	$11,949	$17,169	$16,354	$60,734
11	Budget cap	$112,000	$84,000	$116,000	$118,000	$430,000
12	Headroom	$5,160	$360	-$4,180	$3,520	$4,860	1.1%	Share of cap left
13
14

14 rows · 8 columnsB9