Event Types

This page documents the TypeScript types for events emitted by the onChange callback.

ViewerEvent

The ViewerEvent type is a discriminated union of two event types:

type ViewerEvent = SelectionChangeEvent | SheetChangeEvent;

Import it from the package:

import type { ViewerEvent } from "@grid-is/mondrian-react";

SelectionChangeEvent

Fired when the user selects a different cell or range in the spreadsheet.

Type Definition

interface SelectionChangeEvent {
  type: "selection-change";
  selection: string;
  timestamp: number;
}

Properties

• type: "selection-change" - Discriminator for the event type
• selection: A1-style reference string (e.g., "Sheet1!A1:B5" or "C3")
• timestamp: Unix timestamp (milliseconds) when the event occurred

Example

const handleChange = (event: ViewerEvent) => {
  if (event.type === "selection-change") {
    console.log("User selected:", event.selection);
    console.log("At:", new Date(event.timestamp));
  }
};

SheetChangeEvent

Fired when the user switches to a different sheet in the workbook.

Type Definition

interface SheetChangeEvent {
  type: "sheet-change";
  sheetName: string;
  previousSheetName: string;
  timestamp: number;
}

Properties

• type: "sheet-change" - Discriminator for the event type
• sheetName: The name of the newly active sheet
• previousSheetName: The name of the sheet the user switched from
• timestamp: Unix timestamp (milliseconds) when the event occurred

Example

const handleChange = (event: ViewerEvent) => {
  if (event.type === "sheet-change") {
    console.log(`Switched from "${event.previousSheetName}" to "${event.sheetName}"`);
    console.log("At:", new Date(event.timestamp));
  }
};

Type Narrowing

TypeScript will automatically narrow the event type based on the type property:

const handleChange = (event: ViewerEvent) => {
  if (event.type === "selection-change") {
    // TypeScript knows event.selection exists here
    console.log(event.selection);
  } else {
    // TypeScript knows this is a SheetChangeEvent
    console.log(event.sheetName, event.previousSheetName);
  }
};

Complete Example

import { SpreadsheetViewer } from "@grid-is/mondrian-react";
import type { ViewerEvent } from "@grid-is/mondrian-react";

function App() {
  const handleChange = (event: ViewerEvent) => {
    switch (event.type) {
      case "selection-change":
        console.log(`Selected ${event.selection} at ${event.timestamp}`);
        break;
      case "sheet-change":
        console.log(`Changed from ${event.previousSheetName} to ${event.sheetName}`);
        break;
    }
  };

  return <SpreadsheetViewer model={model} onChange={handleChange} />;
}

Usage

See the Handling Events Guide for practical examples of working with these event types.