Your first grid — Sheetwrite

This complete TypeScript example uses the imperative core. Install Sheetwrite first; the framework adapters expose the same Grid after their client-only initialization completes.
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 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";
import "@sheetwrite/core/styles.css";

const hostconst host: HTMLElement | nullconst host: HTMLElement | nullconst host: HTMLElement | null = documentvar document: Documentvar document: Documentvar document: Documentwindow.document returns a reference to the document contained in the window. MDN Reference.querySelectorParentNode.querySelector<HTMLElement>(selectors: string): HTMLElement | null (+4 overloads)ParentNode.querySelector<HTMLElement>(selectors: string): HTMLElement | null (+4 overloads)ParentNode.querySelector<HTMLElement>(selectors: string): HTMLElement | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors. MDN Reference<HTMLElementinterface HTMLElementinterface HTMLElementinterface HTMLElementThe HTMLElement interface represents any HTML element. MDN Reference>("#grid");
if (hostconst host: HTMLElement | nullconst host: HTMLElement | nullconst host: HTMLElement | null === null) throw new Errorvar Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+2 overloads)var Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+2 overloads)var Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+2 overloads)("Missing #grid host");
hostconst host: HTMLElementconst host: HTMLElementconst host: HTMLElement.styleElementCSSInlineStyle.style: CSSStyleDeclarationinterface ElementCSSInlineStyle {
  style: CSSStyleDeclaration;
}interface ElementCSSInlineStyle {
  style: CSSStyleDeclaration;
}MDN ReferenceAPI reference →.heightCSSStyleDeclaration.height: stringinterface CSSStyleDeclaration {
  height: string;
}interface CSSStyleDeclaration {
  height: string;
}MDN ReferenceAPI reference → = "420px";

const workbook: Workbookinterface Workbookinterface Workbookinterface WorkbookLive workbook schema containing ordered sheets and the active sheet ID.API reference → = {
  activeSheetWorkbook.activeSheet: stringinterface Workbook {
  activeSheet: string;
}interface Workbook {
  activeSheet: string;
}Active sheet ID and initial tab presented when the grid is created.API reference →: "sales",
  sheetsWorkbook.sheets: Sheet[]interface Workbook {
  sheets: Sheet[];
}interface Workbook {
  sheets: Sheet[];
}Sheets in display/tab order.API reference →: [
    {
      idSheet.id: stringinterface Sheet {
  id: string;
}interface Sheet {
  id: string;
}Stable identifier, unique within the workbook and used by every cell address.API reference →: "sales",
      nameSheet.name: stringinterface Sheet {
  name: string;
}interface Sheet {
  name: string;
}User-facing sheet name shown in tabs and workbook exports.API reference →: "Sales",
      rowCountSheet.rowCount: numberinterface Sheet {
  rowCount: number;
}interface Sheet {
  rowCount: number;
}Row count for both in-memory and datasource-backed sheets.API reference →: 3,
      columnsSheet.columns: Column[]interface Sheet {
  columns: Column[];
}interface Sheet {
  columns: Column[];
}Ordered schema; array positions are the zero-based column coordinates.API reference →: [
        { keyColumn.key: stringinterface Column {
  key: string;
}interface Column {
  key: string;
}Non-empty key, unique within the sheet, used to map input and datasource values.API reference →: "product", headerColumn.header: stringinterface Column {
  header: string;
}interface Column {
  header: string;
}Schema label written by table exports; the canvas header displays positional column letters.API reference →: "Product", widthColumn.width: numberinterface Column {
  width: number;
}interface Column {
  width: number;
}Unzoomed column width in CSS pixels.API reference →: 180, typeColumn.type: CellFormatinterface Column {
  type: CellFormat;
}interface Column {
  type: CellFormat;
}Controls cell input parsing and default value formatting for this column.API reference →: "text" },
        { keyColumn.key: stringinterface Column {
  key: string;
}interface Column {
  key: string;
}Non-empty key, unique within the sheet, used to map input and datasource values.API reference →: "amount", headerColumn.header: stringinterface Column {
  header: string;
}interface Column {
  header: string;
}Schema label written by table exports; the canvas header displays positional column letters.API reference →: "Amount", widthColumn.width: numberinterface Column {
  width: number;
}interface Column {
  width: number;
}Unzoomed column width in CSS pixels.API reference →: 100, typeColumn.type: CellFormatinterface Column {
  type: CellFormat;
}interface Column {
  type: CellFormat;
}Controls cell input parsing and default value formatting for this column.API reference →: "number" },
      ],
    },
  ],
};
const data: ColumnarDatainterface ColumnarDatainterface ColumnarDatainterface ColumnarDataEager column-oriented values used to initialize a sheet.API reference → = {
  rowCountColumnarData.rowCount: numberinterface ColumnarData {
  rowCount: number;
}interface ColumnarData {
  rowCount: number;
}Row count for both in-memory and datasource-backed sheets.API reference →: 3,
  columnsColumnarData.columns: Record<string, ArrayLike<CellScalar | CellValue>>interface ColumnarData {
  columns: Record<string, ArrayLike<CellScalar | CellValue>>;
}interface ColumnarData {
  columns: Record<
    string,
    ArrayLike<
      CellScalar | CellValue
    >
  >;
}Restrict to these column indices (defaults to all columns).API reference →: {
    productproduct: string[]let product: string[]let product: string[]: ["Notebook", "Pen", "Folder"],
    amountamount: Float64Array<ArrayBuffer>let amount: Float64Array<ArrayBuffer>let amount: Float64Array<ArrayBuffer>: new Float64Arrayvar Float64Array: Float64ArrayConstructor
new (elements: Iterable<number>) => Float64Array<ArrayBuffer> (+6 overloads)var Float64Array: Float64ArrayConstructor
new (elements: Iterable<number>) => Float64Array<ArrayBuffer> (+6 overloads)var Float64Array: Float64ArrayConstructor
new (elements: Iterable<number>) => Float64Array<ArrayBuffer> (+6 overloads)([12, 4, 9]),
  },
};

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 →(hostconst host: HTMLElementconst host: HTMLElementconst 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 → });
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", ({ transactiontransaction: Transactionlet transaction: Transactionlet transaction: TransactionOperations that actually committed after policy and bounds filtering.API reference → }) => {
  consolevar console: Consolevar console: Consolevar console: Console.logConsole.log(...data: any[]): void (+1 overload)Console.log(...data: any[]): void (+1 overload)Console.log(...data: any[]): void (+1 overload)The console.log() static method outputs a message to the console. MDN Reference(transactiontransaction: Transactionlet transaction: Transactionlet transaction: TransactionOperations that actually committed after policy and bounds filtering.API reference →.patchesTransaction.patches: DocumentOp[]interface Transaction {
  patches: DocumentOp[];
}interface Transaction {
  patches: DocumentOp[];
}Ordered document operations submitted as one store commit.API reference →);
});
initSheetwrite() is re-entrant. Call it before createGrid; concurrent calls share initialization and a failed call can be retried. Destroy the returned grid when its host is permanently removed.
Next steps

Open the Vanilla example to exercise the same lifecycle in a production build.
Choose a framework integration.
Learn when the Grid and Store own state.
Browse the generated @sheetwrite/core API.