{"id":11868,"library":"react-spreadsheet","title":"React Spreadsheet","description":"React Spreadsheet is a library for building simple, customizable, and performant spreadsheet components within React applications. As of version 0.10.1, it focuses on providing a straightforward API for common use cases while maintaining flexibility. It has seen consistent updates, with recent releases introducing a new formula evaluation engine that supports cell dependencies and ranges (v0.8.0), and features like row/column selection (v0.7.0). The library differentiates itself by emphasizing 'Just Components™' and aiming for performance without virtualization, making it suitable for scenarios where a fully virtualized, complex spreadsheet might be overkill. It ships with TypeScript type declarations, ensuring a better developer experience with type introspection.","status":"active","version":"0.10.1","language":"javascript","source_language":"en","source_url":"https://github.com/iddan/react-spreadsheet","tags":["javascript","spreadsheet","excel","react","sheet","table","typescript"],"install":[{"cmd":"npm install react-spreadsheet","lang":"bash","label":"npm"},{"cmd":"yarn add react-spreadsheet","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-spreadsheet","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for all React component functionality.","package":"react","optional":false},{"reason":"Required as a peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"Required as a peer dependency for internal React scheduling and concurrency features.","package":"scheduler","optional":false}],"imports":[{"note":"Spreadsheet is a named export, not a default export.","wrong":"import Spreadsheet from 'react-spreadsheet'","symbol":"Spreadsheet","correct":"import { Spreadsheet } from 'react-spreadsheet'"},{"note":"Type definition for individual cells, useful for extending cell properties in TypeScript.","symbol":"CellBase","correct":"import { CellBase } from 'react-spreadsheet'"},{"note":"Used for customizing the cell editing experience within the spreadsheet.","symbol":"DataEditor","correct":"import { DataEditor } from 'react-spreadsheet'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { Spreadsheet, CellBase } from 'react-spreadsheet';\n\ninterface MyData extends CellBase {\n  value: string;\n}\n\nconst initialData: MyData[][] = [\n  [{ value: 'Header 1' }, { value: 'Header 2' }, { value: 'Header 3' }],\n  [{ value: 'Row 1, Cell 1' }, { value: 'Row 1, Cell 2' }, { value: 'Row 1, Cell 3' }],\n  [{ value: 'Row 2, Cell 1' }, { value: 'Row 2, Cell 2' }, { value: 'Row 2, Cell 3' }],\n  [{ value: '=SUM(A2:B2)' }, { value: '=A2*B2' }, { value: 'Example Formula' }]\n];\n\nfunction MySpreadsheetApp() {\n  const [data, setData] = useState<MyData[][]>(initialData);\n\n  const handleDataChange = (newData: MyData[][]) => {\n    console.log('Spreadsheet data changed:', newData);\n    setData(newData);\n  };\n\n  return (\n    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>\n      <h1>Simple React Spreadsheet</h1>\n      <p>Edit cells, including basic formulas like =SUM(A2:B2).</p>\n      <Spreadsheet data={data} onChange={handleDataChange} />\n    </div>\n  );\n}\n\nexport default MySpreadsheetApp;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The `getBindingsForCell` prop has been removed to facilitate the new formula evaluation engine. This prop is no longer available in the component API.","severity":"breaking","affected_versions":">=0.8.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=0.6.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":">=0.5.15"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change the import statement from `import Spreadsheet from 'react-spreadsheet'` to `import { Spreadsheet } from 'react-spreadsheet'`.","cause":"Incorrectly importing the Spreadsheet component as a default import instead of a named import.","error":"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"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');`","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.","error":"TypeError: (0 , _reactSpreadsheet.Spreadsheet) is not a function"},{"fix":"Upgrade `react-spreadsheet` to version `0.8.0` or higher to utilize the new formula evaluation engine that supports cell dependencies and ranges.","cause":"This error message indicates an older version of `react-spreadsheet` that lacks the advanced formula evaluation engine introduced in v0.8.0.","error":"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."}],"ecosystem":"npm"}