@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.
} from "@sheetwrite/svelte" ;
import "@sheetwrite/svelte/styles.css" ;
type Row = { name : string ; amount : number }; Use a client-only boundary in SvelteKit when the surrounding route is server rendered.
const 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 → interface Grid interface Grid interface Grid Imperative grid handle for document commands, events, rendering, and teardown. @example import type { Grid } from "@sheetwrite/core"; function updateTotal(grid: Grid) { const sheet = grid.getActiveSheet(); const result = grid.applyTransaction({ patches: [{ op: "set", addr: { sheet, row: 0, col: 0 }, value: { kind: "literal", value: 42 } }], }); if (result.status === "applied") grid.scrollToCell({ sheet, row: 0, col: 0 }); return grid.aggregate(0, "sum"); }@see createGrid *@see Grid.applyTransactionAPI reference → interface GridReadyEvent interface GridReadyEvent interface GridReadyEvent Grid handle, generation, and reason published after adapter initialization. API reference → interface 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 → interface ChangeEvent interface ChangeEvent interface ChangeEvent Payload of the change event; flows OUT for API submission/reconcile. API reference → interface Transaction interface Transaction interface Transaction Low-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. @example import type { Store, SheetId, Transaction } from "@sheetwrite/core"; function setAmount(store: Store, sheet: SheetId) { const transaction: Transaction = { patches: [{ op: "set", addr: { sheet, row: 0, col: 0 }, value: { kind: "literal", value: 25 } }], }; return store.applyTransaction(transaction); }@see Grid.applyTransactionAPI reference → type Row = {
name: string;
amount: number;
} type Row = { name : string ; amount : number ; }; type Row = { name : string ; amount : number ; }; name: string let name : string let name : string User-facing sheet name shown in tabs and workbook exports. API reference → Props.columns: readonly SimpleColumn<Row>[] interface Props { columns : readonly SimpleColumn < Row >[]; } interface Props { columns : readonly SimpleColumn < Row >[]; } Exact column runs represented by every returned row. API reference → Props.rows: readonly Row[] interface Props { rows : readonly Row []; } interface Props { rows : readonly Row []; } end-exclusive row range API reference → Props.save: (transaction: Transaction) => void interface Props { save : ( transaction : Transaction ) => void ; } interface Props { save : ( transaction : Transaction , ) => void ; } API reference → transaction: Transaction let transaction : Transaction let transaction : Transaction Operations that actually committed after policy and bounds filtering. API reference → Props.onReady: (event: GridReadyEvent) => void interface Props { onReady : ( event : GridReadyEvent ) => void ; } interface Props { onReady : ( event : GridReadyEvent , ) => void ; } Fires after the adapter publishes a ready Grid generation. API reference → let columns: readonly SimpleColumn<Row>[] let columns : readonly SimpleColumn < Row >[] let columns : readonly SimpleColumn < Row >[] Exact column runs represented by every returned row. API reference → let rows: readonly Row[] let rows : readonly Row [] let rows : readonly Row [] end-exclusive row range API reference → let save: (transaction: Transaction) => void let save : ( transaction : Transaction ) => void let save : ( transaction : Transaction , ) => void API reference → let onReady: (event: GridReadyEvent) => void let onReady : ( event : GridReadyEvent ) => void let onReady : ( event : GridReadyEvent , ) => void Fires after the adapter publishes a ready Grid generation. API reference → interface Props interface Props interface Props function $props(): Props function $props () : Props function $props () : Props Declares 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: Grid | undefined let grid : Grid | undefined let grid : Grid | undefined The imperative core grid this controller owns. API reference → const handleGridChange: (event: ChangeEvent) => void const handleGridChange : ( event : ChangeEvent ) => void const handleGridChange : ( event : ChangeEvent , ) => void API reference → ChangeEvent.transaction: Transaction interface ChangeEvent { transaction : Transaction ; } interface ChangeEvent { transaction : Transaction ; } Operations that actually committed after policy and bounds filtering. API reference → columns: readonly SimpleColumn<Record<string, CellScalar>>[] let columns : readonly SimpleColumn < Record < string , CellScalar > >[] let columns : readonly SimpleColumn < Record < string , CellScalar > >[] Exact column runs represented by every returned row. API reference → const rows: readonly Record<string, CellScalar>[] const rows : readonly Record < string , CellScalar >[] const rows : readonly Record < string , CellScalar >[] end-exclusive row range API reference → grid: Grid let grid : Grid let grid : Grid The imperative core grid this controller owns. API reference → onReady: (event: GridReadyEvent) => void let onReady : ( event : GridReadyEvent ) => void let onReady : ( event : GridReadyEvent , ) => void Fires after the adapter publishes a ready Grid generation. API reference →