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/spreadsheet-viewer";
import { Model } from "@grid-is/spreadsheet-engine";


function App() {
  const model = /* your 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 the Model class from @grid-is/spreadsheet-engine. 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: