Loading documentation…
Convenience component for local object rows with live option updates.
import { createApp, h } from "vue";
}) });app.mount(document.body);// Call app.unmount() before removing the host view. object>Workspace packages depending on @sheetwrite/vue
@sheetwrite/docs-startdependencyPublic exports naming Sheetwrite
import { createApp, h } from "vue";
import { Sheetwrite } from "@sheetwrite/vue";
const app = createApp({ render: () => h(Sheetwrite, {
columns: [{ key: "amount", title: "Amount", type: "number" }],
defaultRows: [{ amount: 12 }, { amount: 18 }],
height: 400,
}) });
app.mount(document.body);
// Call app.unmount() before removing the host view.See also SheetwriteGrid *See also /docs/frameworks/vue/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 & SheetwriteProps<Record<string, CellScalar>, 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;
... 10 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;
... 10 more ...;
"onInitialization-error"?: ((payload: SheetwriteError) => void) | undefined;
}) | undefined, children?: RawChildren | RawSlots): VNode (+22 overloads)h<{} & AllowedComponentProps & SheetwriteProps<Record<string, CellScalar>, 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;
... 10 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;
... 10 more ...;
"onInitialization-error"?: ((payload: SheetwriteError) => void) | undefined;
}) | undefined, children?: RawChildren | RawSlots): VNode (+22 overloads)h<{} & AllowedComponentProps & SheetwriteProps<Record<string, CellScalar>, 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;
... 10 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;
... 10 more ...;
"onInitialization-error"?: ((payload: SheetwriteError) => void) | undefined;
}) | undefined, children?: RawChildren | RawSlots): VNode (+22 overloads)SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.columns: readonly SimpleColumn<Record<string, CellScalar>>[]SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.columns: readonly SimpleColumn<Record<string, CellScalar>>[]SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.columns: readonly SimpleColumn<Record<string, CellScalar>>[]Ordered schema used to derive the component-owned sheet.API reference →SimpleColumn<Record<string, CellScalar>>.key: stringSimpleColumn<Record<string, CellScalar>>.key: stringSimpleColumn<Record<string, CellScalar>>.key: stringNon-empty row-object key, unique within the column list.API reference →SimpleColumn<Record<string, CellScalar>>.title: stringSimpleColumn<Record<string, CellScalar>>.title: stringSimpleColumn<Record<string, CellScalar>>.title: stringSemantic title painted in data-grid mode and written by table exports.API reference →SimpleColumn<Record<string, CellScalar>>.type?: CellFormat | undefinedSimpleColumn<Record<string, CellScalar>>.type?: CellFormat | undefinedSimpleColumn<Record<string, CellScalar>>.type?: CellFormat | undefinedInput and formatting type; defaults to text.API reference →SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.defaultRows: readonly Record<string, CellScalar>[]SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.defaultRows: readonly Record<string, CellScalar>[]SheetwriteProps<Record<string, CellScalar>, RowBridgeId>.defaultRows: readonly Record<string, CellScalar>[]Rows converted to initial columnar data; missing keys become null.API reference →amount: numberlet amount: numberlet amount: numberheight?: string | number | undefinedheight?: string | number | undefinedheight?: string | number | undefinedHost 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): ComponentPublicInstancevar document: Documentvar document: Documentvar document: Documentwindow.document returns a reference to the document contained in the window. MDN ReferenceDocument.body: HTMLElementinterface Document {
body: HTMLElement;
}interface Document {
body: HTMLElement;
}The Document.body property represents the null if no such element exists. MDN Referencetype 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 →type SheetwriteProps<
Row extends Record<string, CellScalar>,
Id extends RowBridgeId = RowBridgeId,
> = Omit<
SheetwriteGridProps<Id>,
| "workbook"
| "data"
| "datasource"
| "height"
| "fill"
| "rowBridge"
> &
GridSizeProps & {
columns: readonly SimpleColumn<Row>[];
defaultRows: readonly Row[];
// … 6 more lines — see the API reference
}type SheetwriteProps<
Row extends Record<string, CellScalar>,
Id extends RowBridgeId = RowBridgeId,
> = Omit<
SheetwriteGridProps<Id>,
| "workbook"
| "data"
| "datasource"
| "height"
| "fill"
| "rowBridge"
> &
GridSizeProps & {
columns: readonly SimpleColumn<Row>[];
defaultRows: readonly Row[];
// … 6 more lines — see the API reference
}type SheetwriteProps<
Row extends Record<
string,
CellScalar
>,
Id extends RowBridgeId =
RowBridgeId,
> = Omit<
SheetwriteGridProps<Id>,
| "workbook"
| "data"
| "datasource"
| "height"
| "fill"
| "rowBridge"
> &
GridSizeProps & {
columns: readonly SimpleColumn<Row>[];
defaultRows: readonly Row[];
// … 12 more lines — see the API reference
}Simple framework adapter props for columns and default row objects.API reference →type CellScalar = string | number | boolean | null;type CellScalar = string | number | boolean | null;type CellScalar =
| string
| number
| boolean
| null;A scalar that can be displayed directly.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 →