On this page
Toolbar / feature configuration. When config is set the built-in toolbar is
shown; control flags default to true except the opt-in export flag.
Examples
import type { GridConfig } from "@sheetwrite/core" ; if ( event . altKey && event . key === "b" ) { See also
toolbarbolditalicaligntextColorfillColorborderclearFormatmergesortexporticonscontextMenuundofindtabskeyboard
Members 17
toolbar Show the built-in toolbar (true), hide it (false), or supply a custom item list.
bold Show the bold control in the default toolbar (default true).
italic Show the italic control in the default toolbar (default true).
align Show left, center, and right alignment controls (default true).
textColor Show the text-color control in the default toolbar (default true).
fillColor Show the fill-color control in the default toolbar (default true).
border Show the border control in the default toolbar (default true).
clearFormat Show the clear-format control in the default toolbar (default true).
merge Show merge and unmerge controls in the default toolbar (default true).
sort Show ascending and descending sort controls in the default toolbar (default true).
export Show CSV/XLSX export controls in the default toolbar (default false).
icons Override built-in toolbar icons by action name. Override built-in toolbar icons by action name. Strings render as plain text; DOM nodes/factories support SVG/HTML icons.
undo Show undo/redo controls in the built-in toolbar (default true).
find Built-in Ctrl+F find widget: enabled (true, default) or disabled (false).
tabs Bottom sheet-tab bar for multi-sheet workbooks (default true).
keyboard Built-in keyboard handling. Built-in keyboard handling. `true` (default) keeps the stock Sheets-style
bindings. An object replaces individual action bindings; omitted actions
keep their defaults, and `null` disables an action's keys.
For example: `{ bindings: { copy: { key: "c", mod: true, shift: true } } }`.
Menu hints and toolbar titles use these same bindings. `false` disables
all built-in keys. A function intercepts each keydown before the defaults;
return true to consume it, false to let the built-in handler continue.
Declaration
View full TypeScript declaration
export interface GridConfig {
Referenced by
Workspace packages depending on @sheetwrite/core
@sheetwrite/benchdependency @sheetwrite/docs-startdependency @sheetwrite/reactdependency @sheetwrite/sveltedependency @sheetwrite/vuedependency @sheetwrite/xlsxdependency
Public exports naming GridConfig
interface GridConfig interface GridConfig interface GridConfig 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 → const config: GridConfig const config : GridConfig const config : GridConfig Built-in UI controls; providing an object enables the toolbar unless toolbar is false. API reference → GridConfig.toolbar?: boolean | ToolbarItem[] | undefined interface GridConfig { toolbar ?: boolean | ToolbarItem [] | undefined ; } interface GridConfig { toolbar ?: | boolean | ToolbarItem [] | undefined ; } Show the built-in toolbar (true), hide it (false), or supply a custom item list. API reference → GridConfig.contextMenu?: boolean | ContextMenuItems | undefined interface GridConfig { contextMenu ?: boolean | ContextMenuItems | undefined ; } interface GridConfig { contextMenu ?: | boolean | ContextMenuItems | undefined ; } Built-in menu, disabled menu, static rows, or a request-aware row factory. API reference → ContextMenuItem.action?: ContextMenuActionName | undefined interface ContextMenuItem { action ?: ContextMenuActionName | undefined ; } interface ContextMenuItem { action ?: | ContextMenuActionName | undefined ; } Built-in action to bind (or "separator"). Omit when supplying onClick. API reference → GridConfig.keyboard?: boolean | KeyboardOptions | ((e: KeyboardEvent, grid: Grid) => boolean) | undefined interface GridConfig { keyboard ?: | boolean | KeyboardOptions | (( e : KeyboardEvent , grid : Grid ) => boolean ) | undefined ; } interface GridConfig { keyboard ?: | boolean | KeyboardOptions | (( e : KeyboardEvent , grid : Grid , ) => boolean ) | undefined ; } Built-in keyboard handling. true (default) keeps the stock Sheets-style bindings. An object replaces individual action bindings; omitted actions keep their defaults, and null disables an action's keys. For example: { bindings: { copy: { key: "c", mod: true, shift: true } } }. Menu hints and toolbar titles use these same bindings. false disables all built-in keys. A function intercepts each keydown before the defaults; return true to consume it, false to let the built-in handler continue. API reference → event: KeyboardEvent let event : KeyboardEvent let event : KeyboardEvent grid: Grid let grid : Grid let grid : Grid The imperative core grid this controller owns. API reference → KeyboardEvent.altKey: boolean interface KeyboardEvent { altKey : boolean ; } interface KeyboardEvent { altKey : boolean ; } The KeyboardEvent.altKey read-only property is a boolean value that indicates if the <kbd>alt</kbd> key (<kbd>Option</kbd> or <kbd>⌥</kbd> on macOS) was pressed (true) or not (false) when the event occurred. MDN Reference KeyboardEvent.key: string interface KeyboardEvent { key : string ; } interface KeyboardEvent { key : string ; } The KeyboardEvent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as <kbd>Shift</kbd> as well as the keyboard locale and layout. MDN Reference API reference → Grid.actions: GridActions interface Grid { actions : GridActions ; } interface Grid { actions : GridActions ; } Imperative action surface for binding custom toolbars/menus. API reference → GridActions.toggleBold(): void GridActions. toggleBold (): void GridActions. toggleBold (): void API 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 → 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 → 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 → type ContextMenuItems =
| readonly ContextMenuItem[]
| ((context: ContextMenuContext) => readonly ContextMenuItem[]); type ContextMenuItems = | readonly ContextMenuItem [] | (( context : ContextMenuContext ) => readonly ContextMenuItem []); type ContextMenuItems = | readonly ContextMenuItem [] | (( context : ContextMenuContext , ) => readonly ContextMenuItem []); Static rows or a context-aware factory evaluated each time the menu opens. API reference → interface KeyboardOptions {
bindings?: Partial<
Record<
KeyboardAction,
KeyShortcut | readonly KeyShortcut[] | null
>
>;
} interface KeyboardOptions { bindings ?: Partial < Record < KeyboardAction , KeyShortcut | readonly KeyShortcut [] | null > >; } interface KeyboardOptions { bindings ?: Partial < Record < KeyboardAction , | KeyShortcut | readonly KeyShortcut [] | null > >; } Overrides replace all default keys for an action; null disables that action's keys. 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.applyTransaction API reference →