Vanilla JavaScript — Sheetwrite

Use @sheetwrite/core when the host owns DOM lifetime directly. Call initSheetwrite() on the client, pass an existing element to createGrid, and retain the returned Grid for events and commands.

import {
  createGridfunction createGrid(host: HTMLElement, opts: GridOptions): Gridfunction createGrid(
  host: HTMLElement,
  opts: GridOptions,
): Gridfunction createGrid(
  host: HTMLElement,
  opts: GridOptions,
): GridCreates and mounts an imperative Grid in the supplied host element.API reference →,
  initSheetwritefunction initSheetwrite(source?: BufferSource | URL | string | Request | WebAssembly.Module): Promise<void>function initSheetwrite(
  source?:
    BufferSource | URL | string | Request | WebAssembly.Module,
): Promise<void>function initSheetwrite(
  source?:
    | BufferSource
    | URL
    | string
    | Request
    | WebAssembly.Module,
): Promise<void>Load the WASM data engine once. Must be awaited before createGrid.API reference →,
  type ChangeEventinterface ChangeEventinterface ChangeEventinterface ChangeEventPayload of the change event; flows OUT for API submission/reconcile.API reference →,
  type ColumnarDatainterface ColumnarDatainterface ColumnarDatainterface ColumnarDataEager column-oriented values used to initialize a sheet.API reference →,
  type Workbookinterface Workbookinterface Workbookinterface WorkbookLive workbook schema containing ordered sheets and the active sheet ID.API reference →,
} from "@sheetwrite/core";

export async function mountSheetwritefunction mountSheetwrite(host: HTMLElement, workbook: Workbook, data: ColumnarData, persistChange: (event: ChangeEvent) => void): Promise<() => void>function mountSheetwrite(
  host: HTMLElement,
  workbook: Workbook,
  data: ColumnarData,
  persistChange: (event: ChangeEvent) => void,
): Promise<() => void>function mountSheetwrite(
  host: HTMLElement,
  workbook: Workbook,
  data: ColumnarData,
  persistChange: (
    event: ChangeEvent,
  ) => void,
): Promise<() => void>(
  host: HTMLElementinterface HTMLElementinterface HTMLElementinterface HTMLElementThe HTMLElement interface represents any HTML element. MDN Reference,
  workbook: Workbookinterface Workbookinterface Workbookinterface WorkbookLive workbook schema containing ordered sheets and the active sheet ID.API reference →,
  data: ColumnarDatainterface ColumnarDatainterface ColumnarDatainterface ColumnarDataEager column-oriented values used to initialize a sheet.API reference →,
  persistChange: (event: ChangeEventinterface ChangeEventinterface ChangeEventinterface ChangeEventPayload of the change event; flows OUT for API submission/reconcile.API reference →) => void,
) {
  await initSheetwritefunction initSheetwrite(source?: BufferSource | URL | string | Request | WebAssembly.Module): Promise<void>function initSheetwrite(
  source?:
    BufferSource | URL | string | Request | WebAssembly.Module,
): Promise<void>function initSheetwrite(
  source?:
    | BufferSource
    | URL
    | string
    | Request
    | WebAssembly.Module,
): Promise<void>Load the WASM data engine once. Must be awaited before createGrid.API reference →();
  const gridconst grid: Gridconst grid: Gridconst grid: GridThe imperative core grid this controller owns.API reference → = createGridfunction createGrid(host: HTMLElement, opts: GridOptions): Gridfunction createGrid(
  host: HTMLElement,
  opts: GridOptions,
): Gridfunction createGrid(
  host: HTMLElement,
  opts: GridOptions,
): GridCreates and mounts an imperative Grid in the supplied host element.API reference →(hosthost: HTMLElementlet host: HTMLElementlet host: HTMLElement, { workbookGridOptions.workbook: Workbookinterface GridOptions {
  workbook: Workbook;
}interface GridOptions {
  workbook: Workbook;
}Live workbook schema adopted by the store and updated by document operations.API reference →, dataGridOptions.data?: ColumnarData | undefinedinterface GridOptions {
  data?: ColumnarData | undefined;
}interface GridOptions {
  data?: ColumnarData | undefined;
}Eager column-major values loaded into workbook.activeSheet; use instead of datasource.API reference → });
  const offconst off: () => voidconst off: () => voidconst off: () => void = gridconst grid: Gridconst grid: Gridconst grid: GridThe imperative core grid this controller owns.API reference →.onGrid.on<"change">(evt: "change", fn: (e: ChangeEvent) => void): () => voidGrid.on<"change">(evt: "change", fn: (e: ChangeEvent) => void): () => voidGrid.on<"change">(evt: "change", fn: (e: ChangeEvent) => void): () => void("change", persistChangepersistChange: (event: ChangeEvent) => voidlet persistChange: (event: ChangeEvent) => voidlet persistChange: (
  event: ChangeEvent,
) => void);

  return () => {
    offconst off: () => voidconst off: () => voidconst off: () => void();
    gridconst grid: Gridconst grid: Gridconst grid: GridThe imperative core grid this controller owns.API reference →.destroyGrid.destroy(): voidGrid.destroy(): voidGrid.destroy(): voidDetach every event subscription and destroy the grid. Call exactly once.API reference →();
  };
}

A datasource-backed grid may use dense storage or allocation-lazy paged storage. Full-sheet operations can throw IncompleteDataError until every required page is loaded. Worker rendering automatically falls back to the main-thread canvas when capabilities or startup fail; observe renderer-fallback if the host needs to report that transition.