Registry / devops / react-datasheet

react-datasheet

library1.4.12jsnpmunverified

react-datasheet is a React component for creating Excel-like spreadsheet grids with cell selection, copy/paste, keyboard navigation, and custom renderers. Version 1.4.12 is the latest stable release, but the project is no longer under active development (abandoned). It supports React 16+, provides TypeScript types, and includes callbacks like onCellsChanged for grid editing. Compared to alternatives like react-spreadsheet-grid or handsontable, react-datasheet is simpler, lightweight, and has minimal dependencies. No releases in years; maintenance ended.

devops

npm install react-datasheet

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-DATASHEET

react-datasheet

devopsjavascriptv1.4.12

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

default (ReactDataSheet)

✓ import ReactDataSheet from 'react-datasheet'

✗ import { ReactDataSheet } from 'react-datasheet'

This is a default export, not named.

type definitions

✓ import ReactDataSheet from 'react-datasheet' // Types included

TypeScript types are bundled; no separate @types package needed.

CSS

✓ import 'react-datasheet/lib/react-datasheet.css'

✗ import 'react-datasheet/dist/react-datasheet.css'

CSS path changed in some versions; always use lib/ path.

Basic spreadsheet grid with edit cells via onCellsChanged callback, including CSS import.

import React, { useState } from 'react'; import ReactDataSheet from 'react-datasheet'; import 'react-datasheet/lib/react-datasheet.css'; const gridData = [ [{ value: 1 }, { value: 3 }], [{ value: 2 }, { value: 4 }], ]; function App() { const [grid, setGrid] = useState(gridData); const valueRenderer = (cell) => cell.value; const onCellsChanged = (changes) => { const newGrid = grid.map(row => [...row]); changes.forEach(({ cell, row, col, value }) => { newGrid[row][col] = { ...newGrid[row][col], value }; }); setGrid(newGrid); }; return ( <ReactDataSheet data={grid} valueRenderer={valueRenderer} onCellsChanged={onCellsChanged} /> ); } export default App;

Debug

Known issues

gotchareact-datasheet is no longer maintained. No bug fixes, security patches, or React 18+ compatibility guaranteed.

fix

Consider migrating to actively maintained alternatives.

affects: >=1.0

breakingThe CSS import path changed in v1.4.x. Using wrong path may cause missing styles.

fix

Use import 'react-datasheet/lib/react-datasheet.css'

affects: >=1.4

deprecatedPropTypes are not validated in production; no built-in TypeScript strict mode support.

fix

Use TypeScript to enforce types at compile time.

affects: >=1.0

Errors

Common errors & fixes

Cannot find module 'react-datasheet' or its corresponding type declarations.

Missing type definitions or wrong import path

fix

Install package: npm install react-datasheet. Ensure TypeScript can resolve types (types included).

Styles not applied / grid looks unstyled

CSS file not imported

fix

Add import 'react-datasheet/lib/react-datasheet.css' to your entry point.

onCellsChanged is not a function

Missing or incorrect prop

fix

Ensure onCellsChanged prop is passed as a function: onCellsChanged={changes => {...}}

Upgrade

Version history

1.4.12latest on npm

Audit

Dependencies

prop-typesrequiredpeer dependency for type checking

reactrequiredpeer dependency

react-domrequiredpeer dependency

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/nadbm/react-datasheet ↗

packagereact-datasheet ↗

homepagehttps://github.com/nadbm/react-datasheet#readme ↗