einfach · excel

PORT CONTRACT

React controlled projection

A local React island renders fixed cells through the public provider, grid, selection, and pointer APIs.

Try this

  1. Drag from one cell across another cell.
  2. Read the selected range directly below the grid.
  3. Start another drag to replace the range.

How it works

The caller owns this fixed 4×4 projection, the deterministic backend object, and an isolated Einfach store. The grid receives cells and the selected range as controlled inputs; the pointer-selection hook writes the range to that store.

This local demo does not fetch, persist, edit, or calculate workbook data. Its backend methods throw if called so the displayed projection remains explicit.

View source

/** @jsxImportSource react */

import { createStore } from '@einfach/core'
import {
  setSelectionBoundsAtom,
  type CellCoord,
  type DisplayCell,
  type SpreadsheetBackend,
} from '@einfach/spreadsheet-ui-core'
import {
  SpreadsheetGridView,
  SpreadsheetUiProvider,
  useSpreadsheetSelection,
} from '@einfach/react-excel'
import { useSpreadsheetPointerSelection } from '@einfach/react-excel/pointer-selection'
import type { PointerEvent as ReactPointerEvent } from 'react'
import './react-adapter-demo.css'

interface ReactAdapterDemoIslandProps {
  locale: 'en' | 'zh'
}

const GRID_WINDOW = { rowStart: 0, rowEnd: 3, colStart: 0, colEnd: 3 }
const GRID_CELLS: readonly DisplayCell[] = Array.from({ length: 16 }, (_, index) => ({