React — Sheetwrite

@sheetwrite/react initializes WASM after client mount. Use Sheetwrite for the simple columns and defaultRows contract; use SheetwriteGrid when the host supplies a Workbook plus eager data or a datasource.
onGridChange reports committed grid changes. onReady receives { grid, generation, reason } after the forwarded ref is assigned. Replacing reset-sensitive inputs creates a new generation; destroy persistence/sync coordinators attached to the previous grid.
import { Sheetwriteconst Sheetwrite: <Row extends Record<string, CellScalar>, Id extends RowBridgeId = RowBridgeId>(props: SheetwriteProps<Row, Id> & {
    ref?: ForwardedRef<Grid>;
}) => ReactElementconst Sheetwrite: <
  Row extends Record<string, CellScalar>,
  Id extends RowBridgeId = RowBridgeId,
>(
  props: SheetwriteProps<Row, Id> & {
    ref?: ForwardedRef<Grid>;
  },
) => ReactElementconst Sheetwrite: <
  Row extends Record<
    string,
    CellScalar
  >,
  Id extends RowBridgeId =
    RowBridgeId,
>(
  props: SheetwriteProps<
    Row,
    Id
  > & {
    ref?: ForwardedRef<Grid>;
  },
) => ReactElementConvenience component for local object rows. It derives a single-sheet workbook from columns, defaultRows, and sheetName, initializes Sheetwrite, and owns the Grid through prop-driven resets and unmount cleanup. Pass a ref to access the live Grid; use SheetwriteGrid when the host already owns a workbook or datasource.API reference →, type GridReadyEventinterface GridReadyEventinterface GridReadyEventinterface GridReadyEventGrid handle, generation, and reason published after adapter initialization.API reference →, type SimpleColumninterface SimpleColumn<Row extends Record<string, CellScalar>>interface SimpleColumn<Row extends Record<string, CellScalar>>interface SimpleColumn<Row extends Record<string, CellScalar>>Column definition accepted by the adapters’ simple row-object API.API reference → } from "@sheetwrite/react";
import type { Transactioninterface Transactioninterface Transactioninterface TransactionLow-level Store transaction. epoch provides optional optimistic concurrency at the storage boundary. Calling Store.applyTransaction bypasses Grid read-only checks and Grid undo/redo history. Host-driven edits should use Grid.applyTransaction.API reference → } from "@sheetwrite/core";
import "@sheetwrite/react/styles.css";

type Rowtype Row = {
    name: string;
    amount: number;
}type Row = {
  name: string;
  amount: number;
};type Row = {
  name: string;
  amount: number;
}; = { namename: stringlet name: stringlet name: stringUser-facing sheet name shown in tabs and workbook exports.API reference →: string; amount: number };

interface SheetProps {
  columnsSheetProps.columns: readonly SimpleColumn<Row>[]interface SheetProps {
  columns: readonly SimpleColumn<Row>[];
}interface SheetProps {
  columns: readonly SimpleColumn<Row>[];
}Exact column runs represented by every returned row.API reference →: readonly SimpleColumninterface SimpleColumn<Row extends Record<string, CellScalar>>interface SimpleColumn<Row extends Record<string, CellScalar>>interface SimpleColumn<Row extends Record<string, CellScalar>>Column definition accepted by the adapters’ simple row-object API.API reference →<Rowtype Row = {
    name: string;
    amount: number;
}type Row = {
  name: string;
  amount: number;
};type Row = {
  name: string;
  amount: number;
};>[];
  rowsSheetProps.rows: readonly Row[]interface SheetProps {
  rows: readonly Row[];
}interface SheetProps {
  rows: readonly Row[];
}end-exclusive row rangeAPI reference →: readonly Rowtype Row = {
    name: string;
    amount: number;
}type Row = {
  name: string;
  amount: number;
};type Row = {
  name: string;
  amount: number;
};[];
  saveSheetProps.save: (transaction: Transaction) => voidinterface SheetProps {
  save: (transaction: Transaction) => void;
}interface SheetProps {
  save: (
    transaction: Transaction,
  ) => void;
}API reference →: (transactiontransaction: Transactionlet transaction: Transactionlet transaction: TransactionOperations that actually committed after policy and bounds filtering.API reference →: Transactioninterface Transactioninterface Transactioninterface TransactionLow-level Store transaction. epoch provides optional optimistic concurrency at the storage boundary. Calling Store.applyTransaction bypasses Grid read-only checks and Grid undo/redo history. Host-driven edits should use Grid.applyTransaction.API reference →) => void;
  onReadySheetProps.onReady: (event: GridReadyEvent) => voidinterface SheetProps {
  onReady: (event: GridReadyEvent) => void;
}interface SheetProps {
  onReady: (
    event: GridReadyEvent,
  ) => void;
}Fires after the adapter publishes a ready Grid generation.API reference →: (event: GridReadyEventinterface GridReadyEventinterface GridReadyEventinterface GridReadyEventGrid handle, generation, and reason published after adapter initialization.API reference →) => void;
}

export function Sheetfunction Sheet({ columns, rows, save, onReady }: SheetProps): JSX.Elementfunction Sheet({
  columns,
  rows,
  save,
  onReady,
}: SheetProps): JSX.Elementfunction Sheet({
  columns,
  rows,
  save,
  onReady,
}: SheetProps): JSX.ElementAPI reference →({ columnscolumns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]Exact column runs represented by every returned row.API reference →, rowsrows: readonly Row[]let rows: readonly Row[]let rows: readonly Row[]end-exclusive row rangeAPI reference →, savesave: (transaction: Transaction) => voidlet save: (transaction: Transaction) => voidlet save: (
  transaction: Transaction,
) => voidAPI reference →, onReadyonReady: (event: GridReadyEvent) => voidlet onReady: (event: GridReadyEvent) => voidlet onReady: (
  event: GridReadyEvent,
) => voidFires after the adapter publishes a ready Grid generation.API reference → }: SheetPropsinterface SheetPropsinterface SheetPropsinterface SheetProps) {
  return (
    <Sheetwriteconst Sheetwrite: <Row extends Record<string, CellScalar>, Id extends RowBridgeId = RowBridgeId>(props: SheetwriteProps<Row, Id> & {
    ref?: ForwardedRef<Grid>;
}) => ReactElementconst Sheetwrite: <
  Row extends Record<string, CellScalar>,
  Id extends RowBridgeId = RowBridgeId,
>(
  props: SheetwriteProps<Row, Id> & {
    ref?: ForwardedRef<Grid>;
  },
) => ReactElementconst Sheetwrite: <
  Row extends Record<
    string,
    CellScalar
  >,
  Id extends RowBridgeId =
    RowBridgeId,
>(
  props: SheetwriteProps<
    Row,
    Id
  > & {
    ref?: ForwardedRef<Grid>;
  },
) => ReactElementConvenience component for local object rows. It derives a single-sheet workbook from columns, defaultRows, and sheetName, initializes Sheetwrite, and owns the Grid through prop-driven resets and unmount cleanup. Pass a ref to access the live Grid; use SheetwriteGrid when the host already owns a workbook or datasource.API reference →
      columnscolumns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]Ordered schema used to derive the component-owned sheet.API reference →={columnscolumns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]Exact column runs represented by every returned row.API reference →}
      defaultRowsdefaultRows: readonly Row[]let defaultRows: readonly Row[]let defaultRows: readonly Row[]Rows converted to initial columnar data; missing column keys become null.API reference →={rowsrows: readonly Row[]let rows: readonly Row[]let rows: readonly Row[]end-exclusive row rangeAPI reference →}
      onGridChangeonGridChange?: ((event: ChangeEvent) => void) | undefinedonGridChange?: ((event: ChangeEvent) => void) | undefinedonGridChange?: ((event: ChangeEvent) => void) | undefinedReceives every committed Grid change, including its applied transaction.API reference →={(eventevent: ChangeEventlet event: ChangeEventlet event: ChangeEventAPI reference →) => savesave: (transaction: Transaction) => voidlet save: (transaction: Transaction) => voidlet save: (
  transaction: Transaction,
) => voidAPI reference →(eventevent: ChangeEventlet event: ChangeEventlet event: ChangeEventAPI reference →.transactionChangeEvent.transaction: Transactioninterface ChangeEvent {
  transaction: Transaction;
}interface ChangeEvent {
  transaction: Transaction;
}Operations that actually committed after policy and bounds filtering.API reference →)}
      onReadyonReady?: ((event: GridReadyEvent) => void) | undefinedonReady?: ((event: GridReadyEvent) => void) | undefinedonReady?: ((event: GridReadyEvent) => void) | undefinedFires after the adapter publishes a ready Grid generation.API reference →={onReadyonReady: (event: GridReadyEvent) => voidlet onReady: (event: GridReadyEvent) => voidlet onReady: (
  event: GridReadyEvent,
) => voidFires after the adapter publishes a ready Grid generation.API reference →}
    />
  );
}
Server rendering the component does not initialize WASM. Mount it in a client component in frameworks that render on the server.