Svelte

@sheetwrite/svelte wraps a Grid in a Svelte 5 component. It initializes WASM in the browser.

Package

@sheetwrite/svelte

Component

Sheetwrite

Grid access

bind:grid and onReady

Change events

onGridChange prop

Install

$ npm install @sheetwrite/svelte

Import @sheetwrite/svelte/styles.css once in your app.

Mount a grid

Bind grid when the host needs imperative access. Pass callbacks with the adapter's camel-case props.

<script lang="ts">
  import {
    Sheetwrite,
    type Grid,
    type GridReadyEvent,
    type SimpleColumn,
  } from "@sheetwrite/svelte";
  import type { ChangeEvent, Transaction } from "@sheetwrite/core";
  import "@sheetwrite/svelte/styles.css";

  type Row = { name: string; amount: number };
  interface Props {
    columns: readonly SimpleColumn<Row>[];
    rows: readonly Row[];
    save: (transaction: Transaction) => void;
    onReady: (event: GridReadyEvent) => void;
  }

  let { columns, rows, save, onReady }: Props = $props();
  let grid: Grid | undefined;
  const handleGridChange = (event: ChangeEvent) => save(event.transaction);
</script>

<Sheetwrite
  {columns}
  defaultRows={rows}
  height={420}
  bind:grid
  onGridChange={handleGridChange}
  {onReady}
/>

Listen to changes

onGridChange reports committed Grid changes. The grid binding is set before onReady runs.

Resets and cleanup

The binding is cleared before a reset or unmount. A reset publishes a new generation and reason; destroy the coordinators attached to the previous Grid and create new ones. The lifecycle page lists which inputs update in place and which reset.

Server rendering

When the surrounding SvelteKit route renders on the server, use a client-only boundary.