Skip to content
GRID Editor

Controlling the Editor

Attach a controllerRef to gain imperative access to the editor — useful for UI that needs to highlight cells, jump to a location, or switch sheets without user interaction.

Setup

Section titled “Setup”

Create a ref and pass it to the controllerRef prop:

import { useRef } from "react";
import { SpreadsheetEditor } from "@grid-is/editor-react";
import type { SpreadsheetEditorController } from "@grid-is/editor-react";


function App() {
  const controllerRef = useRef<SpreadsheetEditorController>(null);


  return <SpreadsheetEditor model={model} controllerRef={controllerRef} />;
}

highlightRefs

Section titled “highlightRefs”
highlightRefs(refs: string[], timeInMs?: number): void

Flashes one or more cell ranges in the editor for the given duration. Useful for drawing attention to referenced cells without changing the selection.

controllerRef.current?.highlightRefs(["A1", "B2:C4"], 3000);

selectCells

Section titled “selectCells”
selectCells(ref: string): void

Selects a cell or range and scrolls the viewport to center it. If the reference includes a sheet prefix (e.g. "Sheet2!A1"), the editor will switch to that sheet first. If the reference cannot be parsed, the call is ignored.

controllerRef.current?.selectCells("Z50");
controllerRef.current?.selectCells("Sheet2!A1");

selectSheet

Section titled “selectSheet”
selectSheet(sheetName: string): void

Switches to the named sheet.

controllerRef.current?.selectSheet("Sheet2");