Switching from SpreadsheetViewer to SpreadsheetEditor

If you are currently using the read-only SpreadsheetViewer component and want to let users edit cells, enter formulas, or rename sheets, SpreadsheetEditor is the drop-in replacement. This guide covers what changes.

Package swap

Replace the viewer package with the editor:

npm remove @grid-is/mondrian-react
npm add @grid-is/editor-react

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

Roboto Mono

The formula bar and cell inputs look best with Roboto Mono. The editor uses it when available and falls back to the system monospace font otherwise. Add it to your project via a @font-face declaration or a font service of your choice.

Props that stay the same

These props work identically in SpreadsheetEditor:

Prop	Notes
model	Same Model from @grid-is/apiary — Model.fromXlsx unchanged
initialSelection	Identical
showFormulaReferencesOnCellSelection	Identical
onChange	Same event shape (SelectionChangeEvent | SheetChangeEvent), handlers can be reused

Props not yet available

The following SpreadsheetViewer props have no equivalent in SpreadsheetEditor yet. Both are on the roadmap.

Prop	Notes
theme	The experimental theming API is not yet available. Remove the prop for now.
showErrorTooltips	Not yet available. Remove the prop for now.

Complete example

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

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

  // Model creation is identical to SpreadsheetViewer
  useEffect(() => {
    Model.preconditions.then(() =>
      Model.fromXlsx(buffer, "file.xlsx").then(setModel)
    );
  }, []);

  if (!model) return null;

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