Skip to content
GRID Editor

Quick Start

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

Basic Usage

Section titled “Basic Usage”

Import the component and provide a Model instance:

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


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


  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <SpreadsheetEditor model={model} />
    </div>
  );
}

What is a Model?

Section titled “What is a Model?”

The model prop expects a Model instance from @grid-is/apiary that represents your spreadsheet data.

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

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

Complete Example

Section titled “Complete Example”

Here’s a full working example with file upload:

import { Model } from "@grid-is/apiary";
import { SpreadsheetEditor } from "@grid-is/editor-react";
import { useEffect, useState } from "react";


function App() {
  const [file, setFile] = useState<File | null>(null);
  const [model, setModel] = useState<Model | null>(null);


  useEffect(() => {
    if (!file) {
      setModel(null);
      return;
    }
    let cancelled = false;
    (async () => {
      try {
        await Model.preconditions;
        const m = await Model.fromXlsx(await file.arrayBuffer(), file.name);
        if (!cancelled) setModel(m);
      } catch (e) {
        console.error("Failed to load file:", e);
      }
    })();
    return () => { cancelled = true; };
  }, [file]);


  if (!model) {
    return (
      <input
        type="file"
        accept=".xlsx"
        onChange={(e) => setFile(e.target.files?.[0] ?? null)}
      />
    );
  }


  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <SpreadsheetEditor model={model} />
    </div>
  );
}

Next Steps

Section titled “Next Steps”

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