Svelte — Sheetwrite

@sheetwrite/svelte initializes WASM in the browser. Bind grid when the host needs imperative access and pass onGridChange or onReady callbacks using the adapter's camel-case props.
The binding is populated before onReady and cleared before reset or unmount. A reset publishes a new generation and reason; coordinators attached to the previous grid must be destroyed and recreated.
<script lang="ts">
  import {
    Sheetwriteconst Sheetwrite: Component<SheetwriteProps<Record<string, CellScalar>>, {}, "grid">const Sheetwrite: Component<
  SheetwriteProps<Record<string, CellScalar>>,
  {},
  "grid"
>const Sheetwrite: Component<
  SheetwriteProps<
    Record<string, CellScalar>
  >,
  {},
  "grid"
>Owns a sheet derived from columns and defaultRows. Bind grid for imperative access; it clears on reset or unmount.API reference →,
    type Gridinterface Gridinterface Gridinterface GridImperative grid handle for document commands, events, rendering, and teardown.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/svelte";
  import type { ChangeEventinterface ChangeEventinterface ChangeEventinterface ChangeEventPayload of the change event; flows OUT for API submission/reconcile.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 → } from "@sheetwrite/core";
  import "@sheetwrite/svelte/styles.css";

  type Rowtype Row = {
    name: string;
    amount: number;
}type Row = {
  name: string;
  amount: number;
};type Row = {
  name: string;
  amount: number;
}; = { name: string; amount: number };
  interface Props {
    columnsProps.columns: readonly SimpleColumn<Row>[]interface Props {
  columns: readonly SimpleColumn<Row>[];
}interface Props {
  columns: readonly SimpleColumn<Row>[];
}Restrict to these column indices (defaults to all columns).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;
};>[];
    rowsProps.rows: readonly Row[]interface Props {
  rows: readonly Row[];
}interface Props {
  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;
};[];
    saveProps.save: (transaction: Transaction) => voidinterface Props {
  save: (transaction: Transaction) => void;
}interface Props {
  save: (
    transaction: Transaction,
  ) => void;
}: (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;
    onReadyProps.onReady: (event: GridReadyEvent) => voidinterface Props {
  onReady: (event: GridReadyEvent) => void;
}interface Props {
  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;
  }

  let { columnslet columns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]let columns: readonly SimpleColumn<Row>[]Restrict to these column indices (defaults to all columns).API reference →, rowslet rows: readonly Row[]let rows: readonly Row[]let rows: readonly Row[]end-exclusive row rangeAPI reference →, savelet save: (transaction: Transaction) => voidlet save: (transaction: Transaction) => voidlet save: (
  transaction: Transaction,
) => void, onReadylet onReady: (event: GridReadyEvent) => voidlet onReady: (event: GridReadyEvent) => voidlet onReady: (
  event: GridReadyEvent,
) => voidFires after the adapter publishes a ready Grid generation.API reference → }: Propsinterface Propsinterface Propsinterface Props = $propsfunction $props(): Propsfunction $props(): Propsfunction $props(): PropsDeclares the props that a component accepts. Example: let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();@see {@link svelte.dev/docs/svelte/$props Documentation}();
  let grid: Gridinterface Gridinterface Gridinterface GridImperative grid handle for document commands, events, rendering, and teardown.API reference → | undefined;
  const handleGridChangeconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (
  event: ChangeEvent,
) => void = (event: ChangeEventinterface ChangeEventinterface ChangeEventinterface ChangeEventPayload of the change event; flows OUT for API submission/reconcile.API reference →) => savelet save: (transaction: Transaction) => voidlet save: (transaction: Transaction) => voidlet save: (
  transaction: Transaction,
) => void(event.transactionChangeEvent.transaction: Transactioninterface ChangeEvent {
  transaction: Transaction;
}interface ChangeEvent {
  transaction: Transaction;
}Operations that actually committed after policy and bounds filtering.API reference →);
</script>

<Sheetwriteconst Sheetwrite: Component<SheetwriteProps<Record<string, CellScalar>>, {}, "grid">const Sheetwrite: Component<
  SheetwriteProps<Record<string, CellScalar>>,
  {},
  "grid"
>const Sheetwrite: Component<
  SheetwriteProps<
    Record<string, CellScalar>
  >,
  {},
  "grid"
>Owns a sheet derived from columns and defaultRows. Bind grid for imperative access; it clears on reset or unmount.API reference →
  {columnscolumns: readonly SimpleColumn<Record<string, CellScalar>>[]let columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]let columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]Restrict to these column indices (defaults to all columns).API reference →}
  defaultRows={rowsconst rows: readonly Record<string, CellScalar>[]const rows: readonly Record<string, CellScalar>[]const rows: readonly Record<
  string,
  CellScalar
>[]end-exclusive row rangeAPI reference →}
  bind:gridgrid: Gridlet grid: Gridlet grid: GridThe imperative core grid this controller owns.API reference →
  onGridChange={handleGridChangeconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (
  event: ChangeEvent,
) => void}
  {onReadyonReady: (event: GridReadyEvent) => voidlet onReady: (event: GridReadyEvent) => voidlet onReady: (
  event: GridReadyEvent,
) => voidFires after the adapter publishes a ready Grid generation.API reference →}
/>
Use a client-only boundary in SvelteKit when the surrounding route is server rendered.