Spreadsheet
A1-style editable grid — multi-select, keyboard navigation (arrows / Tab / Enter / F2 / Delete), Cmd+C/V clipboard interop.
Basic usage
v-model binds a flat Record<string, string> keyed by A1 strings. You get an editable grid where:
- Click a cell → select
- Drag / Shift+click → range selection
- Double-click / Enter / F2 → edit
- Arrow keys / Tab → move the focus
- Delete / Backspace → clear the selection
- Cmd/Ctrl + C / X / V → TSV roundtrip with the system clipboard
单击选中、双击编辑、方向键移动、Tab/Enter 确认；Cmd/Ctrl + C / V 在选区与剪贴板间复制粘贴 TSV。
A
B
C
D
E
1
产品
区域
销量
2
A
华北
120
3
B
华东
230
4
C
华南
180
5
6
7
8
9
10
External roundtrip
The clipboard format is plain TSV (tab-separated text), so you can copy/paste directly between this grid and Excel / Numbers / Google Sheets:
A
B
C
D
E
1
2
3
4
5
6
7
8
9
10
试试：在 Excel / Numbers / Sheets 选一段复制，到这里 Cmd/Ctrl+V 粘贴；反向 Cmd/Ctrl+C 也能拷出去。
API
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue (Vue) / modelValue + onChange (React) | Record<string, string> | {} | A1 → value map |
rows | number | 20 | Row count |
cols | number | 10 | Column count |
colWidth | number | 120 | Pixel column width |
rowHeight | number | 28 | Pixel row height |
rowHeaderWidth | number | 44 | Row-number header width |
readonly | boolean | false | Disable edit / delete / paste |
disableClipboard | boolean | false | Disable system-clipboard bridging |
caption | string | — | Caption above the sheet |
size | 'sm' | 'md' | 'lg' | 'md' | Font size scale |
Events:
- Vue:
@update:modelValue(next)/@cell-change({ cell, value })/@selection-change(range) - React:
onChange/onCellChange/onSelectionChange
Utilities
import { toA1, colLetter, rangeToTSV, tsvToData } from '@chufix-design/vue';
toA1(0, 0); // 'A1'
colLetter(27); // 'AB'
rangeToTSV(data, { start: { col: 0, row: 0 }, end: { col: 2, row: 4 } });
tsvToData('1\t2\n3\t4', { col: 0, row: 0 }, { cols: 10, rows: 20 });
These are pure functions you can use independently of the component.
Keyboard map
| Key | Action |
|---|---|
← / → / ↑ / ↓ | Move the focus (hold Shift to extend the selection) |
Tab / Shift+Tab | Horizontal navigation |
Enter / F2 | Edit current cell; while editing, Enter commits and moves down |
Esc | Cancel an in-flight edit |
Delete / Backspace | Clear all cells in the selection |
| Any printable key | Start editing immediately, seeded with that character |
Cmd/Ctrl + C / X / V | Clipboard TSV bridge |
Cmd/Ctrl + A | Select all |
反馈与讨论
Spreadsheet · Discussion