Loading documentation…
Creates and mounts an imperative Grid in the supplied host element.
const host = document.createElement("div");document.body.append(host); },});// Call when the host view is removed.Workspace packages depending on @sheetwrite/core
@sheetwrite/benchdependency@sheetwrite/docs-startdependency@sheetwrite/reactdependency@sheetwrite/sveltedependency@sheetwrite/vuedependency@sheetwrite/xlsxdependencyPublic exports naming createGrid
import { createGrid, initSheetwrite } from "@sheetwrite/core";
await initSheetwrite();
const host = document.createElement("div");
host.style.height = "400px";
document.body.append(host);
const grid = createGrid(host, {
workbook: {
activeSheet: "sales",
sheets: [{ id: "sales", name: "Sales", rowCount: 2,
columns: [{ key: "amount", header: "Amount", type: "number", width: 120 }] }],
},
data: { rowCount: 2, columns: { amount: [12, 18] } },
});
grid.scrollToCell({ sheet: "sales", row: 1, col: 0 });
// Call when the host view is removed.
grid.destroy();See also Grid *See also GridOptionsAPI reference →function initSheetwrite(source?: BufferSource | URL | string | Request | WebAssembly.Module, engine?: SheetwriteEngine): Promise<void>function initSheetwrite(
source?:
BufferSource | URL | string | Request | WebAssembly.Module,
engine?: SheetwriteEngine,
): Promise<void>function initSheetwrite(
source?:
| BufferSource
| URL
| string
| Request
| WebAssembly.Module,
engine?: SheetwriteEngine,
): Promise<void>Load one WASM engine before createGrid. The default is @sheetwrite/wasm. Pass the @sheetwrite/formulas module as the second argument to select the full engine.Exampleimport { initSheetwrite } from "@sheetwrite/core";
import * as formulas from "@sheetwrite/formulas";
await initSheetwrite(undefined, formulas);See also /docs/guides/formulas/See also createGridAPI reference →const host: HTMLDivElementconst host: HTMLDivElementconst host: HTMLDivElementvar document: Documentvar document: Documentvar document: Documentwindow.document returns a reference to the document contained in the window. MDN ReferenceDocument.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the document.createElement() method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized. MDN ReferenceElementCSSInlineStyle.style: CSSStyleDeclarationinterface ElementCSSInlineStyle {
style: CSSStyleDeclaration;
}interface ElementCSSInlineStyle {
style: CSSStyleDeclaration;
}MDN ReferenceAPI reference →CSSStyleDeclaration.height: stringinterface CSSStyleDeclaration {
height: string;
}interface CSSStyleDeclaration {
height: string;
}MDN ReferenceAPI reference →Document.body: HTMLElementinterface Document {
body: HTMLElement;
}interface Document {
body: HTMLElement;
}The Document.body property represents the null if no such element exists. MDN ReferenceParentNode.append(...nodes: (Node | string)[]): voidParentNode.append(...nodes: (Node | string)[]): voidParentNode.append(...nodes: (Node | string)[]): voidInserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes. Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. MDN Referenceconst grid: Gridconst grid: Gridconst grid: GridThe imperative core grid this controller owns.API reference →GridOptions.workbook: Workbookinterface GridOptions {
workbook: Workbook;
}interface GridOptions {
workbook: Workbook;
}Live workbook schema adopted by the store and updated by document operations.API reference →Workbook.activeSheet: stringinterface Workbook {
activeSheet: string;
}interface Workbook {
activeSheet: string;
}Active sheet ID and initial tab presented when the grid is created.API reference →Workbook.sheets: Sheet[]interface Workbook {
sheets: Sheet[];
}interface Workbook {
sheets: Sheet[];
}Sheets in display/tab order.API reference →Sheet.id: stringinterface Sheet {
id: string;
}interface Sheet {
id: string;
}Stable identifier, unique within the workbook and used by every cell address.API reference →Sheet.name: stringinterface Sheet {
name: string;
}interface Sheet {
name: string;
}User-facing sheet name shown in tabs and workbook exports.API reference →Sheet.rowCount: numberinterface Sheet {
rowCount: number;
}interface Sheet {
rowCount: number;
}Row count for both in-memory and datasource-backed sheets.API reference →Sheet.columns: Column[]interface Sheet {
columns: Column[];
}interface Sheet {
columns: Column[];
}Ordered schema; array positions are the zero-based column coordinates.API reference →Column.key: stringinterface Column {
key: string;
}interface Column {
key: string;
}Non-empty key, unique within the sheet, used to map input and datasource values.API reference →Column.header: stringinterface Column {
header: string;
}interface Column {
header: string;
}Schema label used by table exports and data-grid presentation headers.API reference →Column.type: CellFormatinterface Column {
type: CellFormat;
}interface Column {
type: CellFormat;
}Controls cell input parsing and default value formatting for this column.API reference →Column.width: numberinterface Column {
width: number;
}interface Column {
width: number;
}Unzoomed column width in CSS pixels.API reference →GridOptions.data?: ColumnarData | undefinedinterface GridOptions {
data?: ColumnarData | undefined;
}interface GridOptions {
data?: ColumnarData | undefined;
}Eager column-major values loaded into workbook.activeSheet; use instead of datasource.API reference →ColumnarData.rowCount: numberinterface ColumnarData {
rowCount: number;
}interface ColumnarData {
rowCount: number;
}Row count for both in-memory and datasource-backed sheets.API reference →ColumnarData.columns: Record<string, ArrayLike<CellScalar | CellValue>>interface ColumnarData {
columns: Record<string, ArrayLike<CellScalar | CellValue>>;
}interface ColumnarData {
columns: Record<
string,
ArrayLike<
CellScalar | CellValue
>
>;
}Exact column runs represented by every returned row.API reference →amount: number[]let amount: number[]let amount: number[]Grid.scrollToCell(addr: CellAddress): voidGrid.scrollToCell(addr: CellAddress): voidGrid.scrollToCell(addr: CellAddress): voidCellAddress.sheet: stringinterface CellAddress {
sheet: string;
}interface CellAddress {
sheet: string;
}Sheet identity used by the simple data-first adapter. Defaults to sheet1.API reference →CellAddress.row: numberinterface CellAddress {
row: number;
}interface CellAddress {
row: number;
}API reference →CellAddress.col: numberinterface CellAddress {
col: number;
}interface CellAddress {
col: number;
}API reference →Grid.destroy(): voidGrid.destroy(): voidGrid.destroy(): voidRuns immediately before a retained element is removed or replaced.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 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 →