Vue — Sheetwrite

@sheetwrite/vue initializes WASM after client mount. The simple component accepts columns and defaultRows; Vue templates use kebab-case event listeners such as @grid-change and @ready.
The component exposes grid before emitting ready. A reset clears the old exposed handle, creates a new generation, and then publishes the replacement. Reattach any coordinator that subscribed to the old grid.
<script setup lang="ts">
import { Sheetwriteconst Sheetwrite: SheetwriteComponentConstructor<SheetwriteProps, SheetwriteGridEmits, object>const Sheetwrite: SheetwriteComponentConstructor<
  SheetwriteProps,
  SheetwriteGridEmits,
  object
>const Sheetwrite: SheetwriteComponentConstructor<
  SheetwriteProps,
  SheetwriteGridEmits,
  object
>Convenience component for local object rows with live option updates.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/vue";
import type { ChangeEventinterface ChangeEventinterface ChangeEventinterface ChangeEventPayload of the change event; flows OUT for API submission/reconcile.API reference → } from "@sheetwrite/core";
import "@sheetwrite/vue/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 };

const { columnsconst columns: readonly SimpleColumn<Row>[]const columns: readonly SimpleColumn<Row>[]const columns: readonly SimpleColumn<Row>[]Restrict to these column indices (defaults to all columns).API reference →, rowsconst rows: readonly Row[]const rows: readonly Row[]const rows: readonly Row[]end-exclusive row rangeAPI reference → } = definePropsconst defineProps: () => DefineProps<LooseRequired, never> (+2 overloads)const defineProps: () => DefineProps<LooseRequired, never> (+2 overloads)const defineProps: () => DefineProps<LooseRequired, never> (+2 overloads)Vue <script setup> compiler macro for declaring component props. The expected argument is the same as the component props option. Example runtime declaration: // using Array syntax const props = defineProps(['foo', 'bar']) // using Object syntax const props = defineProps({ foo: String, bar: { type: Number, required: true } }) Equivalent type-based declaration: // will be compiled into equivalent runtime declarations const props = defineProps<{ foo?: string bar: number }>()@see vuejs.org/api/sfc-script-setup.html#defineprops-defineemits This is only usable inside <script setup>, is compiled away in the output and should not be actually called at runtime.<{
  columns: 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;
};>[];
  rows: readonly Rowtype Row = {
    name: string;
    amount: number;
}type Row = {
  name: string;
  amount: number;
};type Row = {
  name: string;
  amount: number;
};[];
}>();
const emitconst emit: ((evt: "gridChange", event: ChangeEvent) => void) & ((evt: "ready", event: GridReadyEvent) => void)const emit: ((
  evt: "gridChange",
  event: ChangeEvent,
) => void) &
  ((evt: "ready", event: GridReadyEvent) => void)const emit: ((
  evt: "gridChange",
  event: ChangeEvent,
) => void) &
  ((
    evt: "ready",
    event: GridReadyEvent,
  ) => void) = defineEmitsconst defineEmits: () => ((evt: "gridChange", event: ChangeEvent) => void) & ((evt: "ready", event: GridReadyEvent) => void) (+2 overloads)const defineEmits: () => ((evt: "gridChange", event: ChangeEvent) => void) & ((evt: "ready", event: GridReadyEvent) => void) (+2 overloads)const defineEmits: () => ((evt: "gridChange", event: ChangeEvent) => void) & ((evt: "ready", event: GridReadyEvent) => void) (+2 overloads)Vue <script setup> compiler macro for declaring a component's emitted events. The expected argument is the same as the component emits option. Example runtime declaration: const emit = defineEmits(['change', 'update']) Example type-based declaration: const emit = defineEmits<{ // <eventName>: <expected arguments> change: [] update: [value: number] // named tuple syntax }>() emit('change') emit('update', 1) This is only usable inside <script setup>, is compiled away in the output and should not be actually called at runtime.@see vuejs.org/api/sfc-script-setup.html#defineprops-defineemits<{
  gridChange: [eventChangeEventChangeEvent;ChangeEvent;Payload of the change event; flows OUT for API submission/reconcile.: ChangeEventinterface ChangeEventinterface ChangeEventinterface ChangeEventPayload of the change event; flows OUT for API submission/reconcile.API reference →];
  ready: [eventGridReadyEventGridReadyEvent;GridReadyEvent;Grid handle, generation, and reason published after adapter initialization.: GridReadyEventinterface GridReadyEventinterface GridReadyEventinterface GridReadyEventGrid handle, generation, and reason published after adapter initialization.API reference →];
}>();

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 →) => emitconst emit: (evt: "gridChange", event: ChangeEvent) => void (+1 overload)const emit: (evt: "gridChange", event: ChangeEvent) => void (+1 overload)const emit: (evt: "gridChange", event: ChangeEvent) => void (+1 overload)("gridChange", event);
const handleReadyconst handleReady: (event: GridReadyEvent) => voidconst handleReady: (event: GridReadyEvent) => voidconst handleReady: (
  event: GridReadyEvent,
) => void = (event: GridReadyEventinterface GridReadyEventinterface GridReadyEventinterface GridReadyEventGrid handle, generation, and reason published after adapter initialization.API reference →) => emitconst emit: (evt: "ready", event: GridReadyEvent) => void (+1 overload)const emit: (evt: "ready", event: GridReadyEvent) => void (+1 overload)const emit: (evt: "ready", event: GridReadyEvent) => void (+1 overload)("ready", event);
</script>

<template>
  <Sheetwriteconst Sheetwrite: SheetwriteComponentConstructor<SheetwriteProps, SheetwriteGridEmits, object>const Sheetwrite: SheetwriteComponentConstructor<
  SheetwriteProps,
  SheetwriteGridEmits,
  object
>const Sheetwrite: SheetwriteComponentConstructor<
  SheetwriteProps,
  SheetwriteGridEmits,
  object
>Convenience component for local object rows with live option updates.API reference →
    :columnsSheetwriteProps.columns: readonly SimpleColumn<Record<string, CellScalar>>[]interface SheetwriteProps {
  columns: readonly SimpleColumn<Record<string, CellScalar>>[];
}interface SheetwriteProps {
  columns: readonly SimpleColumn<
    Record<string, CellScalar>
  >[];
}Ordered schema used to derive the component-owned sheet.="columnsconst columns: readonly SimpleColumn<Record<string, CellScalar>>[]const columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]const columns: readonly SimpleColumn<
  Record<string, CellScalar>
>[]Restrict to these column indices (defaults to all columns).API reference →"
    :default-rowsSheetwriteProps.defaultRows: readonly Record<string, CellScalar>[]interface SheetwriteProps {
  defaultRows: readonly Record<string, CellScalar>[];
}interface SheetwriteProps {
  defaultRows: readonly Record<
    string,
    CellScalar
  >[];
}Rows converted to initial columnar data; missing keys become null.="rowsconst rows: readonly Record<string, CellScalar>[]const rows: readonly Record<string, CellScalar>[]const rows: readonly Record<
  string,
  CellScalar
>[]end-exclusive row rangeAPI reference →"
    @grid-changeonGridChange: (event: ChangeEvent) => voidlet onGridChange: (event: ChangeEvent) => voidlet onGridChange: (
  event: ChangeEvent,
) => voidCommitted Grid change, including its applied transaction.API reference →="handleGridChangeconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (event: ChangeEvent) => voidconst handleGridChange: (
  event: ChangeEvent,
) => void"
    @readyonReady?: ((payload: GridReadyEvent) => void) | undefinedonReady?: ((payload: GridReadyEvent) => void) | undefinedonReady?: ((payload: GridReadyEvent) => void) | undefinedResolves after durable work is restored and every startup commit is visible locally.API reference →="handleReadyconst handleReady: (event: GridReadyEvent) => voidconst handleReady: (event: GridReadyEvent) => voidconst handleReady: (
  event: GridReadyEvent,
) => void"
  />
</template>
Use a client-only boundary in Nuxt or another server-rendered host; importing or rendering the component on the server does not start WASM.