The grid reads all input through Pointer Events, so mouse, touch, and pen share one code path, and a plain drag on touch scrolls the page natively.
grid . on ( "edit-begin" , ( e ) => console . log ( "double-tap edits" , e )); // On a touch screen, tap A1 to select it; double-tap to edit.
Result: tapping A1 selects its value, 10, and logs tap selected. This static figure does not accept taps or drags.
Full setup
import "@sheetwrite/core/styles.css" ;
const host = document . querySelector < HTMLElement >( "#grid" ); if ( host === null ) throw new Error ( "Missing #grid host" );
columns : { a : new Float64Array ([ 10 , 20 ]), b : new Float64Array ([ 30 , 40 ]) }, grid . on ( "edit-begin" , ( e ) => console . log ( "double-tap edits" , e ));
On a touch screen, a tap on a cell logs tap selected. A double-tap on a cell logs double-tap edits. A drag across plain cells logs nothing, because it scrolls.
Touch gestures
For pointerType: "touch" the policy is:
Gesture Behavior Tap on a cell Select the cell (same as a click). Tap on a column header Select the column. Drag starting on a plain cell Native scroll . The grid neither captures the pointer nor calls preventDefault.Drag starting on the fill handle Drag-to-fill (pointer captured). Drag starting on a row/column resize boundary Resize (pointer captured). Drag starting on the border of a multi-cell selection (±6px band) Extend the selection (pointer captured). Double-tap on a cell Begin editing (the browser's synthesized dblclick).
Mouse and pen
Mouse and pen behave classically: any drag from a cell extends the selection, and hovering a resize boundary shows the resize cursor.
Options
Touch has no options of its own. The gestures above follow the same settings as the mouse: for example, readOnly: true turns off drag-to-fill, and an active sort or filter view hides the fill handle.
Edge cases and limits
A pointercancel (for example, when the browser reclaims the gesture) abandons the drag without committing.
The scroller sets touch-action: pan-x pan-y. This keeps native panning, but disables double-tap zoom so that captured drags keep receiving pointermove.
Long-press to open the context menu on touch is deferred. When it is added, it must cancel on move to respect the native-scroll rule.
See also
const grid: Grid const grid : Grid const grid : Grid The imperative core grid this controller owns. API reference → Grid.on<"selection">(evt: "selection", fn: (e: {
selection: Selection | null;
}) => void): () => void Grid. on < "selection" >(evt: "selection" , fn: ( e : { selection : Selection | null ; }) => void ): () => void Grid. on < "selection" >(evt: "selection" , fn: ( e : { selection : Selection | null ; }) => void ): () => void e: {
selection: Selection | null;
} let e : { selection : Selection | null ; } let e : { selection : Selection | null ; } API reference → var console: Console var console : Console var console : Console Console.log(...data: any[]): void (+1 overload) Console. log ( ... data: any[]): void ( + 1 overload) Console. log ( ... data: any[]): void ( + 1 overload) The console.log() static method outputs a message to the console. MDN Reference selection: Selection | null let selection : Selection | null let selection : Selection | null CSS color painted over the selected region. API reference → Grid.on<"edit-begin">(evt: "edit-begin", fn: (e: {
addr: CellAddress;
}) => void): () => void Grid. on < "edit-begin" >(evt: "edit-begin" , fn: ( e : { addr : CellAddress ; }) => void ): () => void Grid. on < "edit-begin" >(evt: "edit-begin" , fn: ( e : { addr : CellAddress ; }) => void ): () => void e: {
addr: CellAddress;
} let e : { addr : CellAddress ; } let e : { addr : CellAddress ; } API reference → function createGrid(host: HTMLElement, opts: GridOptions): Grid function createGrid ( host : HTMLElement , opts : GridOptions , ) : Grid function createGrid ( host : HTMLElement , opts : GridOptions , ) : Grid Creates and mounts an imperative Grid in the supplied host element. Example 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 GridOptions API 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. Example import { initSheetwrite } from "@sheetwrite/core" ; import * as formulas from "@sheetwrite/formulas" ; await initSheetwrite ( undefined , formulas); See also /docs/start/choose-an-engine/ See also createGrid API reference → interface ColumnarData interface ColumnarData interface ColumnarData Eager column-oriented values used to initialize a sheet. API reference → interface Workbook interface Workbook interface Workbook Live workbook schema containing ordered sheets and the active sheet ID. API reference → const host: HTMLElement | null const host : HTMLElement | null const host : HTMLElement | null var document: Document var document : Document var document : Document window.document returns a reference to the document contained in the window. MDN Reference API reference → ParentNode.querySelector<HTMLElement>(selectors: string): HTMLElement | null (+4 overloads) ParentNode. querySelector < HTMLElement >(selectors: string): HTMLElement | null ( + 4 overloads) ParentNode. querySelector < HTMLElement >(selectors: string): HTMLElement | null ( + 4 overloads) Returns the first element that is a descendant of node that matches selectors. MDN Reference interface HTMLElement interface HTMLElement interface HTMLElement The HTMLElement interface represents any HTML element. MDN Reference var Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+2 overloads) var Error : ErrorConstructor new ( message ?: string , options ?: ErrorOptions ) => Error ( + 2 overloads) var Error : ErrorConstructor new ( message ?: string , options ?: ErrorOptions ) => Error ( + 2 overloads) const host: HTMLElement const host : HTMLElement const host : HTMLElement ElementCSSInlineStyle.style: CSSStyleDeclaration interface ElementCSSInlineStyle { style : CSSStyleDeclaration ; } interface ElementCSSInlineStyle { style : CSSStyleDeclaration ; } MDN Reference API reference → CSSStyleDeclaration.height: string interface CSSStyleDeclaration { height : string ; } interface CSSStyleDeclaration { height : string ; } MDN Reference API reference → const workbook: Workbook const workbook : Workbook const workbook : Workbook Live workbook schema adopted by the store and updated by document operations. API reference → Workbook.activeSheet: string interface 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: string interface Sheet { id : string ; } interface Sheet { id : string ; } Stable identifier, unique within the workbook and used by every cell address. API reference → Sheet.name: string interface Sheet { name : string ; } interface Sheet { name : string ; } User-facing sheet name shown in tabs and workbook exports. API reference → Sheet.rowCount: number interface 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: string interface 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: string interface Column { header : string ; } interface Column { header : string ; } Schema label used by table exports and data-grid presentation headers. API reference → Column.type: CellFormat interface Column { type : CellFormat ; } interface Column { type : CellFormat ; } Controls cell input parsing and default value formatting for this column. API reference → Column.width: number interface Column { width : number ; } interface Column { width : number ; } Unzoomed column width in CSS pixels. API reference → const data: ColumnarData const data : ColumnarData const data : ColumnarData Eager column-major values loaded into workbook.activeSheet; use instead of datasource. API reference → ColumnarData.rowCount: number interface 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 → a: Float64Array<ArrayBuffer> let a : Float64Array < ArrayBuffer > let a : Float64Array < ArrayBuffer > var Float64Array: Float64ArrayConstructor
new (elements: Iterable<number>) => Float64Array<ArrayBuffer> (+6 overloads) var Float64Array : Float64ArrayConstructor new ( elements : Iterable < number >) => Float64Array < ArrayBuffer > ( + 6 overloads) var Float64Array : Float64ArrayConstructor new ( elements : Iterable < number >) => Float64Array < ArrayBuffer > ( + 6 overloads) b: Float64Array<ArrayBuffer> let b : Float64Array < ArrayBuffer > let b : Float64Array < ArrayBuffer > GridOptions.workbook: Workbook interface GridOptions { workbook : Workbook ; } interface GridOptions { workbook : Workbook ; } Live workbook schema adopted by the store and updated by document operations. API reference → GridOptions.data?: ColumnarData | undefined interface GridOptions { data ?: ColumnarData | undefined ; } interface GridOptions { data ?: ColumnarData | undefined ; } Eager column-major values loaded into workbook.activeSheet; use instead of datasource. API reference →