On this page
Disposable controller for the framework-neutral spreadsheet shell.
Members 7
grid The single grid the shell owns; use it for data, search, and actions.
element The shell's root element (already appended to the mount host).
readonly element: HTMLElement;
setTheme
setTheme(theme: Partial<Theme>): void;
setReadOnly
setReadOnly(readOnly: boolean): void;
setGridConfig Reconfigure the grid; the shell keeps its own toolbar/tabs suppressed.
setGridConfig(config: GridConfig | undefined): void;
setActiveSheet
destroy
Declaration
View full TypeScript declaration
export interface SpreadsheetShell {
readonly element: HTMLElement;
setTheme(theme: Partial<Theme>): void; setReadOnly(readOnly: boolean): void;
setGridConfig(config: GridConfig | undefined): 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 SpreadsheetShell
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 →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 GridConfig {
toolbar?: boolean | ToolbarItem[];
bold?: boolean;
italic?: boolean;
align?: boolean;
textColor?: boolean;
fillColor?: boolean;
border?: boolean;
clearFormat?: boolean;
merge?: boolean;
sort?: boolean;
export?: boolean;
icons?: Partial<Record<ToolbarActionName, ToolbarIcon>>;
contextMenu?: boolean | ContextMenuItems;
undo?: boolean;
// … 7 more lines — see the API reference
}interface GridConfig {
toolbar?: boolean | ToolbarItem[];
bold?: boolean;
italic?: boolean;
align?: boolean;
textColor?: boolean;
fillColor?: boolean;
border?: boolean;
clearFormat?: boolean;
merge?: boolean;
sort?: boolean;
export?: boolean;
icons?: Partial<Record<ToolbarActionName, ToolbarIcon>>;
contextMenu?: boolean | ContextMenuItems;
undo?: boolean;
// … 7 more lines — see the API reference
}interface GridConfig {
toolbar?:
boolean | ToolbarItem[];
bold?: boolean;
italic?: boolean;
align?: boolean;
textColor?: boolean;
fillColor?: boolean;
border?: boolean;
clearFormat?: boolean;
merge?: boolean;
sort?: boolean;
export?: boolean;
icons?: Partial<
Record<
ToolbarActionName,
ToolbarIcon
>
>;
// … 13 more lines — see the API reference
}Toolbar / feature configuration. When config is set the built-in toolbar is shown; control flags default to true except the opt-in export flag. @example import type { GridConfig } from "@sheetwrite/core"; const config: GridConfig = { toolbar: true, contextMenu: [{ action: "copy" }, { action: "paste" }], keyboard(event, grid) { if (event.altKey && event.key === "b") { grid.actions.toggleBold(); return true; } return false; }, }; @see Grid.setConfig @see ContextMenuItemAPI reference →type SheetId = string;type SheetId = string;type SheetId = string;Stable identifier used to address a workbook sheet.API reference →