On this page
Built-in, separator, or custom callback item in the grid toolbar.
Members 4
action Built-in action to bind (or "separator").
Built-in action to bind (or "separator"). Omit when supplying `onClick`.
onClick Custom click handler; receives the grid handle.
onClick?: (grid: Grid) => void;
Custom click handler; receives the grid handle. Overrides `action`.
icon Button icon/content. Strings render as plain text; pass a DOM Node or a factory returning one for SVG/HTML icons without using innerHTML.
title Accessible tooltip.
Declaration
View full TypeScript declaration
export interface ToolbarItem {
onClick?: (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 ToolbarItem
type ToolbarActionName =
| "bold"
| "italic"
| "underline"
| "strikethrough"
| "alignLeft"
| "alignCenter"
| "alignRight"
| "textColor"
| "fillColor"
| "border"
| "clearFormat"
| "merge"
| "unmerge"
| "sortAsc"
// … 6 more lines — see the API reference
}type ToolbarActionName =
| "bold"
| "italic"
| "underline"
| "strikethrough"
| "alignLeft"
| "alignCenter"
| "alignRight"
| "textColor"
| "fillColor"
| "border"
| "clearFormat"
| "merge"
| "unmerge"
| "sortAsc"
// … 6 more lines — see the API reference
}type ToolbarActionName =
| "bold"
| "italic"
| "underline"
| "strikethrough"
| "alignLeft"
| "alignCenter"
| "alignRight"
| "textColor"
| "fillColor"
| "border"
| "clearFormat"
| "merge"
| "unmerge"
| "sortAsc"
| "sortDesc"
| "exportCsv"
| "exportXlsx"
| "undo"
// … 2 more lines — see the API reference
}Built-in action names accepted by custom toolbar items.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 →type ToolbarIcon = string | Node | (() => Node);type ToolbarIcon = string | Node | (() => Node);type ToolbarIcon =
string | Node | (() => Node);Text, DOM node, or node factory used as toolbar icon content.API reference →