Registry / web-framework / react-spreadsheet

react-spreadsheet

library0.10.1jsnpmunverified

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.

web-framework data

npm install react-spreadsheet

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SPREADSHEET

react-spreadsheet

web-frameworkjavascriptv0.10.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Spreadsheet

✓ import { Spreadsheet } from 'react-spreadsheet'

✗ 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.

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;

Debug

Known issues

breakingThe `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.

affects: >=0.8.0

breakingThe `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.

affects: >=0.6.0

deprecatedThe `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.

affects: >=0.5.15

gotchaReact 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.

affects: >=0.1.0

Errors

Common errors & fixes

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

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

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.

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.

Upgrade

Version history

0.10.1latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for all React component functionality.

react-domrequiredRequired as a peer dependency for rendering React components to the DOM.

schedulerrequiredRequired as a peer dependency for internal React scheduling and concurrency features.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/iddan/react-spreadsheet ↗

packagehttps://www.npmjs.com/package/react-spreadsheet ↗