Skip to content
Spreadsheet Editor

Quick start

@grid-is/spreadsheet-editor is an evaluation version of GRID’s React-based spreadsheet editor. It renders an editable spreadsheet with a formula bar, cell navigation, and full keyboard support.

In this guide we’ll scaffold a new React app from scratch, load an Excel file into it, and have a live editable spreadsheet running in the browser.

  1. Create a new Vite + React project:

    Terminal window
    npm create vite@latest my-spreadsheet-app -- --template react-ts

  2. Stop the server and add the spreadsheet editor and engine as dependencies:

    Terminal window
    cd my-spreadsheet-app
    npm install @grid-is/spreadsheet-editor
    @grid-is/spreadsheet-engine

  3. Save an Excel file into the public/ folder of your project so the browser can fetch it. You can use any .xlsx file you have to hand, but if you need one try our budget.xlsx example.

  4. Replace the contents of src/App.tsx with the following:

    import { useEffect, useState } from "react";
    import { Model } from "@grid-is/spreadsheet-engine";
    import { SpreadsheetEditor } from "@grid-is/spreadsheet-editor";
    import "@grid-is/spreadsheet-editor/style.css";
    

    export default function App() {
      const [model, setModel] = useState<Model | null>(null);
    

      useEffect(() => {
        async function load() {
          await Model.preconditions;
          const res = await fetch("/budget.xlsx");
          const m = await Model.fromXLSX(await res.arrayBuffer(), "budget.xlsx");
          setModel(m);
        }
        load();
      }, []);
    

      if (!model) return <p>Loading…</p>;
    

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

  5. Remove the import of index.css from main.tsx (we don’t need Vite’s default CSS for our project):

    import { StrictMode } from 'react'
    import { createRoot } from 'react-dom/client'
     import './index.css'
    import App from './App.tsx'

  6. Start the dev server:

    Terminal window
    npm run dev

    Open the URL shown in the terminal and you’ll see your spreadsheet loaded and fully editable.

Where to next

Section titled “Where to next”
  • Handling events: our guide on listening for cell edits, selection changes, and structural operations
  • Initial selection: our guide on controlling which cell or range is selected on load
  • API reference: every export, prop, and type