Hooks Architecture (Phase 0)

Grid.tsx is a thin shell that composes 8 independent hooks. Each hook owns a single responsibility and can be tested in isolation.

Demo Pages

useSorting

Controlled vs uncontrolled sorting, sort guard (max 2 columns), sort history UI.

useSelection

Controlled selection, onCopy customization (TSV → JSON), selection guard.

Hook Composition

Combining sorting + selection + event callbacks with an external state panel.

Event Callbacks (Step 0-3)

All 6 event callbacks with interactive blocking toggles and event log.

onAfterDraw (Step 0-4)

Custom canvas overlays after each frame: watermark, row highlight, crosshair.

Adapter DI (Step 0-5)

Inject external EventManager/SelectionManager/EditorManager for testing or multi-grid sharing.

Design Principles

Headless first — Logic and state only, UI decisions are yours
Controlled & Uncontrolled — Every state follows state + onStateChange (TanStack pattern)
Primitive over Feature — Composable building blocks, not monolithic features
Zero-copy by default — Direct WASM memory access, copy only when needed
Tree-shakeable — Unused features stay out of the bundle

Code

Grid.tsx (thin shell — ~420 lines)
│
├─ useWasmEngine        WASM init + MemoryBridge
│
├─ useDataIngestion     data[] → WASM columnar store + StringTable
│
├─ useSorting           sorting state (controlled/uncontrolled)
│   └─ onBeforeSortChange guard
│
├─ useSelection         SelectionManager + clipboard + handlers
│   └─ onBeforeSelectionChange guard
│
├─ useEditing           EditorManager + double-click handler
│
├─ useGridScroll        scroll refs + auto-scroll + clamping
│
├─ useEventAttachment   EventManager.attach + callback interception
│   ├─ onCellClick / onCellDoubleClick
│   ├─ onHeaderClick
│   └─ onKeyDown
│
└─ useRenderLoop        RAF + WASM layout + Canvas draw

Hooks Architecture (Phase 0)

Demo Pages

Design Principles

#Code

Code