Loading documentation…
Advanced framework component for workbook data or datasource input.
import { createApp, h } from "vue";
app.mount(host);}>Workspace packages depending on @sheetwrite/vue
@sheetwrite/docs-startdependencyPublic exports naming SheetwriteGrid
import { createApp, h } from "vue";
import { SheetwriteGrid } from "@sheetwrite/vue";
import type { Workbook } from "@sheetwrite/core";
function mountWorkbook(host: HTMLElement, workbook: Workbook) {
const app = createApp({ render: () => h(SheetwriteGrid, { workbook, height: 400 }) });
app.mount(host);
return () => app.unmount();
}See also Sheetwrite *See also /docs/frameworks/vue/API reference →interface Workbookinterface Workbookinterface WorkbookLive workbook schema containing ordered sheets and the active sheet ID.API reference →function mountWorkbook(host: HTMLElement, workbook: Workbook): () => voidfunction mountWorkbook(
host: HTMLElement,
workbook: Workbook,
): () => voidfunction mountWorkbook(
host: HTMLElement,
workbook: Workbook,
): () => voidAPI reference →interface HTMLElementinterface HTMLElementinterface HTMLElementThe HTMLElement interface represents any HTML element. MDN Referenceworkbook: Workbooklet workbook: Workbooklet workbook: WorkbookLive workbook schema adopted by the store and updated by document operations.API reference →const app: App<Element>const app: App<Element>const app: App<Element>function createApp(rootComponent: Component, rootProps?: Data | null): App<Element>function createApp(
rootComponent: Component,
rootProps?: Data | null,
): App<Element>function createApp(
rootComponent: Component,
rootProps?: Data | null,
): App<Element>ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>.render?: Function | undefinedinterface ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> { render?: Function | undefined }interface ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> { render?: Function | undefined }h<{} & AllowedComponentProps & SheetwriteGridProps<RowBridgeId> & VNodeProps & {
onSearch?: ((payload: SearchResult) => void) | undefined;
"onRow-delta"?: ((payload: RowBridgeProjection<RowBridgeId>) => void) | undefined;
"onGrid-change"?: ((payload: ChangeEvent) => void) | undefined;
"onSelection-change"?: ((payload: Selection | null) => void) | undefined;
"onViewport-change"?: ((payload: {
scrollTop: number;
... 4 more ...;
lastVisibleColumn: number | null;
}) => void) | undefined;
... 9 more ...;
"onInitialization-error"?: ((payload: SheetwriteError) => void) | undefined;
}>(type: Constructor<...>, props?: (VNodeProps & ... 5 more ... & {
onSearch?: ((payload: SearchResult) => void) | undefined;
"onRow-delta"?: ((payload: RowBridgeProjection<RowBridgeId>) => void) | undefined;
"onGrid-change"?: ((payload: ChangeEvent) => void) | undefined;
"onSelection-change"?: ((payload: Selection | null) => void) | undefined;
"onViewport-change"?: ((payload: {
scrollTop: number;
... 4 more ...;
lastVisibleColumn: number | null;
}) => void) | undefined;
... 9 more ...;
"onInitialization-error"?: ((payload: SheetwriteError) => void) | undefined;
}) | undefined, children?: RawChildren | RawSlots): VNode (+22 overloads)h<{} & AllowedComponentProps & SheetwriteGridProps<RowBridgeId> & VNodeProps & {
onSearch?: ((payload: SearchResult) => void) | undefined;
"onRow-delta"?: ((payload: RowBridgeProjection<RowBridgeId>) => void) | undefined;
"onGrid-change"?: ((payload: ChangeEvent) => void) | undefined;
"onSelection-change"?: ((payload: Selection | null) => void) | undefined;
"onViewport-change"?: ((payload: {
scrollTop: number;
... 4 more ...;
lastVisibleColumn: number | null;
}) => void) | undefined;
... 9 more ...;
"onInitialization-error"?: ((payload: SheetwriteError) => void) | undefined;
}>(type: Constructor<...>, props?: (VNodeProps & ... 5 more ... & {
onSearch?: ((payload: SearchResult) => void) | undefined;
"onRow-delta"?: ((payload: RowBridgeProjection<RowBridgeId>) => void) | undefined;
"onGrid-change"?: ((payload: ChangeEvent) => void) | undefined;
"onSelection-change"?: ((payload: Selection | null) => void) | undefined;
"onViewport-change"?: ((payload: {
scrollTop: number;
... 4 more ...;
lastVisibleColumn: number | null;
}) => void) | undefined;
... 9 more ...;
"onInitialization-error"?: ((payload: SheetwriteError) => void) | undefined;
}) | undefined, children?: RawChildren | RawSlots): VNode (+22 overloads)h<{} & AllowedComponentProps & SheetwriteGridProps<RowBridgeId> & VNodeProps & {
onSearch?: ((payload: SearchResult) => void) | undefined;
"onRow-delta"?: ((payload: RowBridgeProjection<RowBridgeId>) => void) | undefined;
"onGrid-change"?: ((payload: ChangeEvent) => void) | undefined;
"onSelection-change"?: ((payload: Selection | null) => void) | undefined;
"onViewport-change"?: ((payload: {
scrollTop: number;
... 4 more ...;
lastVisibleColumn: number | null;
}) => void) | undefined;
... 9 more ...;
"onInitialization-error"?: ((payload: SheetwriteError) => void) | undefined;
}>(type: Constructor<...>, props?: (VNodeProps & ... 5 more ... & {
onSearch?: ((payload: SearchResult) => void) | undefined;
"onRow-delta"?: ((payload: RowBridgeProjection<RowBridgeId>) => void) | undefined;
"onGrid-change"?: ((payload: ChangeEvent) => void) | undefined;
"onSelection-change"?: ((payload: Selection | null) => void) | undefined;
"onViewport-change"?: ((payload: {
scrollTop: number;
... 4 more ...;
lastVisibleColumn: number | null;
}) => void) | undefined;
... 9 more ...;
"onInitialization-error"?: ((payload: SheetwriteError) => void) | undefined;
}) | undefined, children?: RawChildren | RawSlots): VNode (+22 overloads)SheetwriteGridProps<Id extends RowBridgeId = RowBridgeId>.workbook: Workbookinterface SheetwriteGridProps<
Id extends RowBridgeId = RowBridgeId,
> {
workbook: Workbook;
}interface SheetwriteGridProps<
Id extends RowBridgeId =
RowBridgeId,
> {
workbook: Workbook;
}Live workbook schema adopted by the Grid.API reference →SheetwriteGridProps<Id extends RowBridgeId = RowBridgeId>.height?: string | number | undefinedinterface SheetwriteGridProps<
Id extends RowBridgeId = RowBridgeId,
> {
height?: string | number | undefined;
}interface SheetwriteGridProps<
Id extends RowBridgeId =
RowBridgeId,
> {
height?:
string | number | undefined;
}Host height in CSS pixels for numbers or any CSS length string.API reference →App<Element>.mount(rootContainer: string | Element, isHydrate?: boolean, namespace?: boolean | ElementNamespace, vnode?: VNode): ComponentPublicInstanceApp<Element>.mount(rootContainer: string | Element, isHydrate?: boolean, namespace?: boolean | ElementNamespace, vnode?: VNode): ComponentPublicInstanceApp<Element>.mount(rootContainer: string | Element, isHydrate?: boolean, namespace?: boolean | ElementNamespace, vnode?: VNode): ComponentPublicInstancehost: HTMLElementlet host: HTMLElementlet host: HTMLElementApp<Element>.unmount(): voidApp<Element>.unmount(): voidApp<Element>.unmount(): voidIdempotent; a later mount preserves generation numbering.API reference →type SheetwriteComponentConstructor<
Props,
Emits,
Expose = object,
> = new () => Expose &
ComponentPublicInstance & {
$props: AllowedComponentProps &
Props &
VNodeProps & {
[
EventName in keyof Emits &
string as `on${Capitalize<EventName>}`
]?: (payload: Emits[EventName]) => void;
};
};type SheetwriteComponentConstructor<
Props,
Emits,
Expose = object,
> = new () => Expose &
ComponentPublicInstance & {
$props: AllowedComponentProps &
Props &
VNodeProps & {
[
EventName in keyof Emits &
string as `on${Capitalize<EventName>}`
]?: (payload: Emits[EventName]) => void;
};
};type SheetwriteComponentConstructor<
Props,
Emits,
Expose = object,
> = new () => Expose &
ComponentPublicInstance & {
$props: AllowedComponentProps &
Props &
VNodeProps & {
[
EventName in keyof Emits &
string as `on${Capitalize<EventName>}`
]?: (
payload: Emits[EventName],
) => void;
};
};Vue constructor type for Sheetwrite components: Sheetwrite-owned props, emitted events exposed as on* listener props, and the exposed instance surface reachable through a template ref.API reference →interface SheetwriteGridProps<
Id extends RowBridgeId = RowBridgeId,
> {
rowBridge?: RowBridge<Id>;
onRowDelta?: RowBridgeHandler<Id>;
onMutationRejected?: GridAdapterEventHandlers["onMutationRejected"];
onRendererFallback?: GridAdapterEventHandlers["onRendererFallback"];
onDatasourceError?: GridAdapterEventHandlers["onDatasourceError"];
onExportError?: GridAdapterEventHandlers["onExportError"];
onReady?: GridAdapterEventHandlers["onReady"];
className?: string;
style?: CSSProperties;
fallback?: ReactNode;
height?: number | string;
fill?: true;
// … 33 more lines — see the API reference
}interface SheetwriteGridProps<
Id extends RowBridgeId = RowBridgeId,
> {
rowBridge?: RowBridge<Id>;
onRowDelta?: RowBridgeHandler<Id>;
onMutationRejected?: GridAdapterEventHandlers["onMutationRejected"];
onRendererFallback?: GridAdapterEventHandlers["onRendererFallback"];
onDatasourceError?: GridAdapterEventHandlers["onDatasourceError"];
onExportError?: GridAdapterEventHandlers["onExportError"];
onReady?: GridAdapterEventHandlers["onReady"];
className?: string;
style?: CSSProperties;
fallback?: ReactNode;
height?: number | string;
fill?: true;
// … 33 more lines — see the API reference
}interface SheetwriteGridProps<
Id extends RowBridgeId =
RowBridgeId,
> {
rowBridge?: RowBridge<Id>;
onRowDelta?: RowBridgeHandler<Id>;
onMutationRejected?: GridAdapterEventHandlers["onMutationRejected"];
onRendererFallback?: GridAdapterEventHandlers["onRendererFallback"];
onDatasourceError?: GridAdapterEventHandlers["onDatasourceError"];
onExportError?: GridAdapterEventHandlers["onExportError"];
onReady?: GridAdapterEventHandlers["onReady"];
className?: string;
style?: CSSProperties;
fallback?: ReactNode;
height?: number | string;
fill?: true;
onGridChange?: (
event: ChangeEvent,
) => void;
// … 58 more lines — see the API reference
}Advanced framework adapter props for workbook data or datasource ownership.API reference →type RowBridgeId = string | number;type RowBridgeId = string | number;type RowBridgeId =
string | number;A stable host identity for one data-space row.API reference →interface SheetwriteGridEmits<
Id extends RowBridgeId = RowBridgeId,
> {
"row-delta": Parameters<RowBridgeHandler<Id>>[0];
"grid-change": ChangeEvent;
"selection-change": Selection | null;
"viewport-change": GridEvents["scroll"];
"edit-begin": GridEvents["edit-begin"];
"edit-commit": GridEvents["edit-commit"];
search: GridEvents["search"];
"command-state-change": GridEvents["command-state-change"];
"active-sheet-change": GridEvents["active-sheet"];
"mutation-rejected": GridEvents["mutation-rejected"];
"renderer-fallback": GridEvents["renderer-fallback"];
"datasource-error": GridEvents["datasource-error"];
// … 4 more lines — see the API reference
}interface SheetwriteGridEmits<
Id extends RowBridgeId = RowBridgeId,
> {
"row-delta": Parameters<RowBridgeHandler<Id>>[0];
"grid-change": ChangeEvent;
"selection-change": Selection | null;
"viewport-change": GridEvents["scroll"];
"edit-begin": GridEvents["edit-begin"];
"edit-commit": GridEvents["edit-commit"];
search: GridEvents["search"];
"command-state-change": GridEvents["command-state-change"];
"active-sheet-change": GridEvents["active-sheet"];
"mutation-rejected": GridEvents["mutation-rejected"];
"renderer-fallback": GridEvents["renderer-fallback"];
"datasource-error": GridEvents["datasource-error"];
// … 4 more lines — see the API reference
}interface SheetwriteGridEmits<
Id extends RowBridgeId =
RowBridgeId,
> {
"row-delta": Parameters<
RowBridgeHandler<Id>
>[0];
"grid-change": ChangeEvent;
"selection-change": Selection | null;
"viewport-change": GridEvents["scroll"];
"edit-begin": GridEvents["edit-begin"];
"edit-commit": GridEvents["edit-commit"];
search: GridEvents["search"];
"command-state-change": GridEvents["command-state-change"];
"active-sheet-change": GridEvents["active-sheet"];
"mutation-rejected": GridEvents["mutation-rejected"];
"renderer-fallback": GridEvents["renderer-fallback"];
"datasource-error": GridEvents["datasource-error"];
"export-error": GridEvents["export-error"];
// … 3 more lines — see the API reference
}Event payloads emitted by the Vue components, keyed by template event name.API reference →interface SheetwriteGridExpose {
grid: Grid | null;
}interface SheetwriteGridExpose {
grid: Grid | null;
}interface SheetwriteGridExpose {
grid: Grid | null;
}Imperative Grid handle exposed by the Vue advanced component.API reference →