Data grid
A spreadsheet-like editable grid with arrow-key cell selection, Shift ranges, edit on Enter or typing, copy and paste, column resize, a frozen first column and a sum footer.
Preview
Line item
Owner
Qty
Unit cost
Total (read-only)
Margin
Region
Design system audit
Priya
3
$1,200.00
$3,600.00
32%
EU
Webhook retry service
Malik
2
$2,400.00
$4,800.00
41%
US
Accessibility review
Ines
5
$640.00
$3,200.00
28%
EU
Status page refresh
Tomás
1
$3,100.00
$3,100.00
36%
APAC
Billing copy rewrite
Noor
4
$380.00
$1,520.00
22%
US
Data export jobs
Malik
2
$1,750.00
$3,500.00
39%
EU
Onboarding flow v3
Priya
3
$1,480.00
$4,440.00
33%
US
Total · 7 rows
20
$24,160.00
Arrow keys move, Shift extends the selection. Enter or typing edits a cell; Enter saves and moves down, Escape cancels. Copy and paste work on the selection.
Click a cell, type to replace, Enter to edit. Shift + arrows select a range; the footer sums it. ⌘C / ⌘V copy and paste. Drag a header edge to resize.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | { id, header, width?, type?, editable?, sum? }[] | — | type is text, number, currency or percent; sum adds the column to the footer. |
| rows / defaultRows | GridRow[] | [] | { id, [columnId]: string | number | null }. |
| onRowsChange | (rows) => void | — | After edits, clears and pastes; recompute derived columns here. |
| label | string | — | Accessible name of the grid. |
| currency / locale | string | "USD" / "en-US" | Number formatting. |
| height | number | 360 | Scroll area height in px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.