Component Props

This page documents all props available on the SpreadsheetViewer component.

Props

model

• Type: Model
• Required: Yes

The spreadsheet model instance to render. This object contains all the data, formulas, and formatting for the spreadsheet.

<SpreadsheetViewer model={model} />

The Model type is typically created by parsing an .xlsx file using @borgar/xlsx-convert.

---

theme

• Type: Record<string, string>
• Required: No

An object containing CSS variable overrides for customizing the appearance of the spreadsheet.

<SpreadsheetViewer
  model={model}
  theme={{
    '--mondrian-highlight-stroke': '#3b82f6',
    '--mondrian-highlight-fill': '#dbeafe',
  }}
/>

See the Theming Guide for available theme properties and examples.

---

initialSelection

• Type: string
• Required: No

Sets the initial cell or range selection when the component mounts. Accepts an A1-style reference string, optionally prefixed with a sheet name.

// Select cell A1 on the default sheet
<SpreadsheetViewer model={model} initialSelection="A1" />

// Select a range on a specific sheet
<SpreadsheetViewer model={model} initialSelection="Sheet2!B2:E5" />

See the Initial Selection Guide for more details.

---

onChange

• Type: (event: ViewerEvent) => void
• Required: No

Callback function that fires when the user interacts with the spreadsheet. Receives a ViewerEvent which can be either a selection change or sheet change event.

<SpreadsheetViewer
  model={model}
  onChange={(event) => {
    if (event.type === "selection-change") {
      console.log("Selected:", event.range);
    }
    if (event.type === "sheet-change") {
      console.log("Active sheet:", event.sheetName);
    }
  }}
/>

See the Handling Events Guide for detailed usage.

---

showErrorTooltips

• Type: boolean
• Required: No
• Default: false

When true, displays tooltips for cells containing errors (such as #DIV/0!, #REF!, etc.).

<SpreadsheetViewer model={model} showErrorTooltips />

See the Error Tooltips Guide for more information.

---

showFormulaReferencesOnCellSelection

• Type: boolean
• Required: No
• Default: false

When true, selecting a cell with a formula will highlight all referenced cells with colored dashed borders and semi-transparent fills.

<SpreadsheetViewer model={model} showFormulaReferencesOnCellSelection />

See the Formula References Guide for more information.

---

TypeScript Types

All types are exported from @grid-is/mondrian-react:

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

For detailed event type definitions, see the Event Types Reference.