Host elements and feature options used to create a spreadsheet shell.
Members 5
grid Options for the single grid the shell owns.
Options for the single grid the shell owns. `initSheetwrite` must already be awaited.
toolbar Toolbar items (default: the full built-in action set).
onChange Event callbacks forwarded from the owned grid.
onSelectionChange
onSelectionChange?: (selection: Selection | null) => void;
onReady
onReady?: (grid: Grid) => void;
Declaration
View full TypeScript declaration
export interface SpreadsheetShellOptions {
onSelectionChange?: (selection: Selection | null) => void; onReady?: (grid: Grid) => void;
Referenced by
Workspace packages depending on @sheetwrite/core
@sheetwrite/benchdependency@sheetwrite/docs-startdependency@sheetwrite/reactdependency@sheetwrite/sveltedependency@sheetwrite/vuedependency@sheetwrite/xlsxdependency
Public exports naming SpreadsheetShellOptions
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 ToolbarItem {
action?: ToolbarActionName;
onClick?: (grid: Grid) => void;
icon?: ToolbarIcon;
title?: string;
}interface ToolbarItem {
action?: ToolbarActionName;
onClick?: (grid: Grid) => void;
icon?: ToolbarIcon;
title?: string;
}interface ToolbarItem {
action?: ToolbarActionName;
onClick?: (grid: Grid) => void;
icon?: ToolbarIcon;
title?: string;
}Built-in, separator, or custom callback item in the grid toolbar.API reference →interface ChangeEvent {
transaction: Transaction;
changes: CellChange[];
commitReason: CommitReason;
source: OperationSource;
epoch?: number;
}interface ChangeEvent {
transaction: Transaction;
changes: CellChange[];
commitReason: CommitReason;
source: OperationSource;
epoch?: number;
}interface ChangeEvent {
transaction: Transaction;
changes: CellChange[];
commitReason: CommitReason;
source: OperationSource;
epoch?: number;
}Payload of the change event; flows OUT for API submission/reconcile.API reference →type Selection =
| { kind: "cell"; addr: CellAddress }
| { kind: "range"; range: Range }
| { kind: "row"; sheet: SheetId; row: number }
| { kind: "column"; sheet: SheetId; col: number }
| { kind: "multi"; ranges: Range[] };type Selection =
| { kind: "cell"; addr: CellAddress }
| { kind: "range"; range: Range }
| { kind: "row"; sheet: SheetId; row: number }
| { kind: "column"; sheet: SheetId; col: number }
| { kind: "multi"; ranges: Range[] };type Selection =
| {
kind: "cell";
addr: CellAddress;
}
| {
kind: "range";
range: Range;
}
| {
kind: "row";
sheet: SheetId;
row: number;
}
| {
kind: "column";
sheet: SheetId;
col: number;
}
// … 4 more lines — see the API reference
}Current cell, range, row, column, or multi-range selection.API reference →interface Grid {
readonly store: Store;
readonly actions: GridActions;
getRuntimeResourceSnapshot(
operation: RuntimeResourceOperation,
phase: RuntimeResourcePhase,
runtime?: RuntimeMemoryObservation,
): RuntimeResourceSnapshot;
getCommandState(command: GridCommandName): GridCommandState;
setActiveSheet(id: SheetId): void;
scrollToCell(addr: CellAddress): void;
getCellAtPoint(
clientX: number,
clientY: number,
): CellAddress | null;
// … 122 more lines — see the API reference
}interface Grid {
readonly store: Store;
readonly actions: GridActions;
getRuntimeResourceSnapshot(
operation: RuntimeResourceOperation,
phase: RuntimeResourcePhase,
runtime?: RuntimeMemoryObservation,
): RuntimeResourceSnapshot;
getCommandState(command: GridCommandName): GridCommandState;
setActiveSheet(id: SheetId): void;
scrollToCell(addr: CellAddress): void;
getCellAtPoint(
clientX: number,
clientY: number,
): CellAddress | null;
// … 122 more lines — see the API reference
}interface Grid {
readonly store: Store;
readonly actions: GridActions;
getRuntimeResourceSnapshot(
operation: RuntimeResourceOperation,
phase: RuntimeResourcePhase,
runtime?: RuntimeMemoryObservation,
): RuntimeResourceSnapshot;
getCommandState(
command: GridCommandName,
): GridCommandState;
setActiveSheet(
id: SheetId,
): void;
scrollToCell(
addr: CellAddress,
): void;
getCellAtPoint(
clientX: number,
// … 259 more lines — see the API reference
}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 →