Vanilla JavaScript

Use @sheetwrite/core directly when the host owns the DOM lifetime. You initialize the engine, create the Grid, and destroy it yourself.

Package

@sheetwrite/core

Entry points

initSheetwrite, createGrid

Grid access

The returned Grid

Change events

grid.on("change")

Install

$ npm install @sheetwrite/core

Mount a grid

Call initSheetwrite() on the client, pass an existing element to createGrid, and keep the returned Grid for events and commands.

import {
  createGrid,
  initSheetwrite,
  type ChangeEvent,
  type ColumnarData,
  type Workbook,
} from "@sheetwrite/core";

export async function mountSheetwrite(
  host: HTMLElement,
  workbook: Workbook,
  data: ColumnarData,
  persistChange: (event: ChangeEvent) => void,
) {
  await initSheetwrite();
  const grid = createGrid(host, { workbook, data });
  const off = grid.on("change", persistChange);

  return () => {
    off();
    grid.destroy();
  };
}

Listen to changes

grid.on("change", …) reports committed changes and returns a function that removes the listener. The cleanup function in the example removes the listener and then destroys the Grid.

Data and rendering

A datasource-backed Grid can use dense storage or allocation-lazy paged storage. Full-sheet operations can throw IncompleteDataError until every required page is loaded. Worker rendering falls back to the main-thread canvas when the browser lacks a capability or the worker fails to start; listen to renderer-fallback if the host must report that change.