Skip to content
Spreadsheet Viewer

Quick Start

This guide shows you how to use the SpreadsheetViewer component in your React application.

Basic Usage

Section titled “Basic Usage”

Import the component and provide a model instance:

import { SpreadsheetViewer } from "@grid-is/mondrian-react";
// Use either @grid-is/apiary or @grid-is/cellatrix to create the model
import { Model } from "@grid-is/apiary"; // or "@grid-is/cellatrix"


function App() {
  const model = /* your Apiary or Cellatrix Model instance */;


  return (
    <div style={{ height: "600px" }}>
      <SpreadsheetViewer model={model} />
    </div>
  );
}

What is a Model?

Section titled “What is a Model?”

The model prop expects an instance of either:

  • @grid-is/apiary — The full spreadsheet engine with formula evaluation. Use this if you have an Apiary licence.
  • @grid-is/cellatrix — A lightweight read-only alternative. Use this for projects that don’t require Apiary.

Both implement the same interface and work with SpreadsheetViewer.

To learn how to create a Model from Excel files, see the Loading Spreadsheets guide, which covers:

  • Installing required dependencies
  • Loading from file uploads
  • Loading from URLs
  • Drag and drop support
  • Error handling

Next Steps

Section titled “Next Steps”

Now that you have the basic component working, explore more features: