React Spreadsheet

Common errors

• Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  cause Incorrectly importing the Spreadsheet component as a default import instead of a named import.
  fix Change the import statement from `import Spreadsheet from 'react-spreadsheet'` to `import { Spreadsheet } from 'react-spreadsheet'`.

• TypeError: (0 , _reactSpreadsheet.Spreadsheet) is not a function

  cause Attempting to use CommonJS `require()` syntax with a library primarily designed for ES modules or attempting to destructure a default export that doesn't exist.
  fix Use ES module named import syntax: `import { Spreadsheet } from 'react-spreadsheet';`. If CommonJS is strictly necessary, ensure you are correctly destructuring the named export: `const { Spreadsheet } = require('react-spreadsheet');`

• Uncaught Error: The current evaluation engine does not support formula dependencies yet for cell A1. This usually indicates a formula like '=B1+C1' where B1 is also a formula.

  cause This error message indicates an older version of `react-spreadsheet` that lacks the advanced formula evaluation engine introduced in v0.8.0.
  fix Upgrade `react-spreadsheet` to version `0.8.0` or higher to utilize the new formula evaluation engine that supports cell dependencies and ranges.

Warnings

• breaking The `getBindingsForCell` prop has been removed to facilitate the new formula evaluation engine. This prop is no longer available in the component API.
  Fix: Refactor custom formula handling to align with the new formula evaluation engine's capabilities. Consult the library's documentation for the updated approach to managing cell bindings and dependencies.
• breaking The `Row` component was split into two distinct components: `Row` (for table body rows) and `HeaderRow` (for the table header row). This impacts custom row rendering.
  Fix: If you have custom row rendering logic, update it to use `HeaderRow` for the spreadsheet's header and `Row` for the main data body rows accordingly.
• deprecated The `CellDescriptor` type was deprecated in version 0.5.15. This change was part of an internal overhaul to use React Context and Reducer for state management, replacing Unistore, to support newer React versions.
  Fix: Avoid direct reliance on `CellDescriptor`. While it may still function, migrate any custom logic or type definitions that use it to the updated public API and types provided by the library.
• gotcha React Spreadsheet requires `react`, `react-dom` (both >=16.8.0), and `scheduler` (>=0.19.0) as peer dependencies. Missing or incompatible versions can lead to runtime errors or instability.
  Fix: Ensure `react`, `react-dom`, and `scheduler` are installed in your project and meet the specified version requirements. Update your `package.json` and reinstall if necessary.

Install

• npm install react-spreadsheet npm
• yarn add react-spreadsheet yarn
• pnpm add react-spreadsheet pnpm

Imports

• Spreadsheet
  wrong:

  import Spreadsheet from 'react-spreadsheet'

  correct:

  import { Spreadsheet } from 'react-spreadsheet'

  Spreadsheet is a named export, not a default export.
• CellBase

  import { CellBase } from 'react-spreadsheet'

  Type definition for individual cells, useful for extending cell properties in TypeScript.
• DataEditor

  import { DataEditor } from 'react-spreadsheet'

  Used for customizing the cell editing experience within the spreadsheet.

Quickstart

This quickstart demonstrates the basic setup of `react-spreadsheet`, showing how to render a simple spreadsheet component with initial data, including a basic formula, and handle changes to its content.

import React, { useState } from 'react';
import { Spreadsheet, CellBase } from 'react-spreadsheet';

interface MyData extends CellBase {
  value: string;
}

const initialData: MyData[][] = [
  [{ value: 'Header 1' }, { value: 'Header 2' }, { value: 'Header 3' }],
  [{ value: 'Row 1, Cell 1' }, { value: 'Row 1, Cell 2' }, { value: 'Row 1, Cell 3' }],
  [{ value: 'Row 2, Cell 1' }, { value: 'Row 2, Cell 2' }, { value: 'Row 2, Cell 3' }],
  [{ value: '=SUM(A2:B2)' }, { value: '=A2*B2' }, { value: 'Example Formula' }]
];

function MySpreadsheetApp() {
  const [data, setData] = useState<MyData[][]>(initialData);

  const handleDataChange = (newData: MyData[][]) => {
    console.log('Spreadsheet data changed:', newData);
    setData(newData);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>Simple React Spreadsheet</h1>
      <p>Edit cells, including basic formulas like =SUM(A2:B2).</p>
      <Spreadsheet data={data} onChange={handleDataChange} />
    </div>
  );
}

export default MySpreadsheetApp;