Advanced Vue adapter props for workbook data or datasource ownership.
Members 22
workbook Live workbook schema adopted by the Grid.
data Eager column-major values for the active sheet.
datasource Lazy row provider requested for visible windows.
datasourceStorage Allocation and cache policy for datasource storage.
rowBridge Optional projection from canonical data-space operations to host row IDs.
renderer Paint backend; defaults to main-thread canvas.
workerUrl Browser-fetchable worker module URL.
presentation Positional spreadsheet or semantic data-grid headers.
theme Live overrides merged into the resolved Grid theme.
readOnly Disables mutation while preserving navigation and selection.
protectionResolver Host-owned client permission check for protected ranges.
protectionResolver?: GridOptions["protectionResolver"];
mutationPolicy Atomic or partial handling for denied local operations.
transactionResourceLimits Overrides inclusive operation-count and encoded-byte ceilings for every atomic mutation.
transactionResourceLimits?: GridOptions["transactionResourceLimits"];
hyperlinkActivation Controls link activation: emit an event, also navigate internally, or disable it.
hyperlinkActivation?: GridOptions["hyperlinkActivation"];
renderers Named custom renderers registered when the Grid is created.
editors Named custom editors registered when the Grid is created.
overscan Extra rows painted above and below the viewport.
minColumns Minimum rendered column count, including empty padding columns.
config Built-in toolbar, menu, keyboard, find, and tab controls.
wasmSource Explicit source passed to process-wide WASM initialization.
height Host height in CSS pixels for numbers or any CSS length string.
height?: number | string;
fill Fills the parent's available width and height.
Declaration
View full TypeScript declaration
protectionResolver?: GridOptions["protectionResolver"]; transactionResourceLimits?: GridOptions["transactionResourceLimits"]; hyperlinkActivation?: GridOptions["hyperlinkActivation"]; height?: number | string;
Referenced by
Workspace packages depending on @sheetwrite/vue
@sheetwrite/docs-startdependency
Public exports naming SheetwriteGridProps
interface Workbook {
sheets: Sheet[];
activeSheet: SheetId;
namedRanges?: NamedRangeSnapshot[];
}interface Workbook {
sheets: Sheet[];
activeSheet: SheetId;
namedRanges?: NamedRangeSnapshot[];
}interface Workbook {
sheets: Sheet[];
activeSheet: SheetId;
namedRanges?: NamedRangeSnapshot[];
}Live workbook schema containing ordered sheets and the active sheet ID.API reference →interface ColumnarData {
rowCount: number;
columns: Record<string, ArrayLike<CellScalar | CellValue>>;
}interface ColumnarData {
rowCount: number;
columns: Record<string, ArrayLike<CellScalar | CellValue>>;
}interface ColumnarData {
rowCount: number;
columns: Record<
string,
ArrayLike<
CellScalar | CellValue
>
>;
}Eager column-oriented values used to initialize a sheet.API reference →interface DataSource {
readonly capabilities: DataSourceCapabilities;
getRows(request: DataSourceRequest): Promise<DataSourcePage>;
}interface DataSource {
readonly capabilities: DataSourceCapabilities;
getRows(request: DataSourceRequest): Promise<DataSourcePage>;
}interface DataSource {
readonly capabilities: DataSourceCapabilities;
getRows(
request: DataSourceRequest,
): Promise<DataSourcePage>;
}Host callback that asynchronously loads cancellable rectangular pages. @example import type { DataSource, RowData } from "@sheetwrite/core"; const rows: RowData[] = [{ amount: 12 }, { amount: 18 }]; const datasource: DataSource = { capabilities: { protocol: 2, columns: "windowed" }, async getRows(request) { request.signal.throwIfAborted(); return { protocol: 2, start: request.start, columns: request.columns, rows: rows.slice(request.start, request.end).map((row) => Object.fromEntries(request.columns.flatMap((band) => band.keys.map((key) => [key, row[key] ?? null])))), }; }, }; @see GridOptions.datasource @see DataSourceRequestAPI reference →interface DataSourceStorageOptions {
mode?: "dense" | "paged";
chunkRows?: number;
cacheBytes?: number;
dirtyCellLimit?: number;
}interface DataSourceStorageOptions {
mode?: "dense" | "paged";
chunkRows?: number;
cacheBytes?: number;
dirtyCellLimit?: number;
}interface DataSourceStorageOptions {
mode?: "dense" | "paged";
chunkRows?: number;
cacheBytes?: number;
dirtyCellLimit?: number;
}Dense or allocation-lazy paged storage policy for datasource cells.API reference →class RowBridge {
constructor<
Id extends RowBridgeId = RowBridgeId,
Row extends Record<string, CellScalar> = Record<
string,
CellScalar
>,
>(options: RowBridgeOptions<Row, Id>);
columnKeys: (sheet?: SheetId) => readonly string[];
project: (
event: ChangeEvent,
requestedOperations?: readonly DocumentOp[],
transactionId?: string,
) => RowBridgeProjection<Id>;
reconcile: (
// … 4 more lines — see the API reference
}class RowBridge {
constructor<
Id extends RowBridgeId = RowBridgeId,
Row extends Record<string, CellScalar> = Record<
string,
CellScalar
>,
>(options: RowBridgeOptions<Row, Id>);
columnKeys: (sheet?: SheetId) => readonly string[];
project: (
event: ChangeEvent,
requestedOperations?: readonly DocumentOp[],
transactionId?: string,
) => RowBridgeProjection<Id>;
reconcile: (
// … 4 more lines — see the API reference
}class RowBridge {
constructor<
Id extends RowBridgeId =
RowBridgeId,
Row extends Record<
string,
CellScalar
> = Record<
string,
CellScalar
>,
>(
options: RowBridgeOptions<
Row,
Id
>,
);
columnKeys: (
sheet?: SheetId,
// … 13 more lines — see the API reference
}Projects canonical document transactions into host-owned row changes. The bridge only owns compact data-space identity arrays. It never writes to defaultRows, never renders, and never creates a second document store.API reference →interface GridOptions {
workbook: Workbook;
data?: ColumnarData;
datasource?: DataSource;
datasourceStorage?: DataSourceStorageOptions;
renderer?: "canvas" | "worker";
workerUrl?: string | URL;
presentation?: GridPresentation;
theme?: Partial<Theme>;
readOnly?: boolean;
hyperlinkActivation?:
"event-only" | "internal-navigation" | "disabled";
protectionResolver?: ProtectionResolver;
mutationPolicy?: MutationPolicyMode;
transactionResourceLimits?: Partial<TransactionResourceLimits>;
// … 6 more lines — see the API reference
}interface GridOptions {
workbook: Workbook;
data?: ColumnarData;
datasource?: DataSource;
datasourceStorage?: DataSourceStorageOptions;
renderer?: "canvas" | "worker";
workerUrl?: string | URL;
presentation?: GridPresentation;
theme?: Partial<Theme>;
readOnly?: boolean;
hyperlinkActivation?:
"event-only" | "internal-navigation" | "disabled";
protectionResolver?: ProtectionResolver;
mutationPolicy?: MutationPolicyMode;
transactionResourceLimits?: Partial<TransactionResourceLimits>;
// … 6 more lines — see the API reference
}interface GridOptions {
workbook: Workbook;
data?: ColumnarData;
datasource?: DataSource;
datasourceStorage?: DataSourceStorageOptions;
renderer?: "canvas" | "worker";
workerUrl?: string | URL;
presentation?: GridPresentation;
theme?: Partial<Theme>;
readOnly?: boolean;
hyperlinkActivation?:
| "event-only"
| "internal-navigation"
| "disabled";
protectionResolver?: ProtectionResolver;
mutationPolicy?: MutationPolicyMode;
transactionResourceLimits?: Partial<TransactionResourceLimits>;
renderers?: Record<
string,
// … 10 more lines — see the API reference
}Workbook, data, rendering, policy, and built-in UI options used to create a Grid. @example import type { GridOptions } from "@sheetwrite/core"; const options: GridOptions = { workbook: { activeSheet: "sheet1", sheets: [ { id: "sheet1", name: "Sheet 1", rowCount: 1, columns: [{ key: "name", header: "Name", type: "text", width: 120 }] }, ] }, data: { rowCount: 1, columns: { name: ["Ada"] } }, config: { toolbar: true, contextMenu: true, keyboard: true }, }; @see createGrid @see GridConfigAPI reference →interface Theme {
font: string;
bg: string;
fg: string;
gridLine: string;
headerBg: string;
headerFg: string;
selection: string;
selectionBorder: string;
rowHeight: number;
headerHeight: number;
rowHeaderWidth: number;
searchMatch: string;
searchActiveMatch: string;
highlight: string;
}interface Theme {
font: string;
bg: string;
fg: string;
gridLine: string;
headerBg: string;
headerFg: string;
selection: string;
selectionBorder: string;
rowHeight: number;
headerHeight: number;
rowHeaderWidth: number;
searchMatch: string;
searchActiveMatch: string;
highlight: string;
}interface Theme {
font: string;
bg: string;
fg: string;
gridLine: string;
headerBg: string;
headerFg: string;
selection: string;
selectionBorder: string;
rowHeight: number;
headerHeight: number;
rowHeaderWidth: number;
searchMatch: string;
searchActiveMatch: string;
highlight: string;
}Resolved canvas colors, typography, and geometry used for painting.API reference →interface CellRenderer {
canvas?(ctx: CanvasRenderingContext2D, c: CellPaintContext): void;
dom?(c: CellPaintContext): HTMLElement;
update?(element: HTMLElement, c: CellPaintContext): void;
destroy?(element: HTMLElement): void;
}interface CellRenderer {
canvas?(ctx: CanvasRenderingContext2D, c: CellPaintContext): void;
dom?(c: CellPaintContext): HTMLElement;
update?(element: HTMLElement, c: CellPaintContext): void;
destroy?(element: HTMLElement): void;
}interface CellRenderer {
canvas?(
ctx: CanvasRenderingContext2D,
c: CellPaintContext,
): void;
dom?(
c: CellPaintContext,
): HTMLElement;
update?(
element: HTMLElement,
c: CellPaintContext,
): void;
destroy?(
element: HTMLElement,
): void;
}Custom cell renderer hooks for the main-thread canvas or retained DOM overlay.API reference →interface SheetwriteInitializationProps {
wasmSource?:
BufferSource | URL | string | Request | WebAssembly.Module;
onInitializationError?: (error: SheetwriteError) => void;
}interface SheetwriteInitializationProps {
wasmSource?:
BufferSource | URL | string | Request | WebAssembly.Module;
onInitializationError?: (error: SheetwriteError) => void;
}interface SheetwriteInitializationProps {
wasmSource?:
| BufferSource
| URL
| string
| Request
| WebAssembly.Module;
onInitializationError?: (
error: SheetwriteError,
) => void;
}Optional explicit WASM source and initialization error callback for adapters.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 →