{"id":41827,"library":"react-datasheet","title":"react-datasheet","description":"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.","status":"abandoned","version":"1.4.12","language":"javascript","source_language":"en","source_url":"https://github.com/nadbm/react-datasheet","tags":["javascript","react-component","react","typescript"],"install":[{"cmd":"npm install react-datasheet","lang":"bash","label":"npm"},{"cmd":"yarn add react-datasheet","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-datasheet","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for type checking","package":"prop-types","optional":false},{"reason":"peer dependency","package":"react","optional":false},{"reason":"peer dependency","package":"react-dom","optional":false}],"imports":[{"note":"This is a default export, not named.","wrong":"import { ReactDataSheet } from 'react-datasheet'","symbol":"default (ReactDataSheet)","correct":"import ReactDataSheet from 'react-datasheet'"},{"note":"TypeScript types are bundled; no separate @types package needed.","wrong":"","symbol":"type definitions","correct":"import ReactDataSheet from 'react-datasheet' // Types included"},{"note":"CSS path changed in some versions; always use lib/ path.","wrong":"import 'react-datasheet/dist/react-datasheet.css'","symbol":"CSS","correct":"import 'react-datasheet/lib/react-datasheet.css'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDataSheet from 'react-datasheet';\nimport 'react-datasheet/lib/react-datasheet.css';\n\nconst gridData = [\n  [{ value: 1 }, { value: 3 }],\n  [{ value: 2 }, { value: 4 }],\n];\n\nfunction App() {\n  const [grid, setGrid] = useState(gridData);\n\n  const valueRenderer = (cell) => cell.value;\n  const onCellsChanged = (changes) => {\n    const newGrid = grid.map(row => [...row]);\n    changes.forEach(({ cell, row, col, value }) => {\n      newGrid[row][col] = { ...newGrid[row][col], value };\n    });\n    setGrid(newGrid);\n  };\n\n  return (\n    <ReactDataSheet\n      data={grid}\n      valueRenderer={valueRenderer}\n      onCellsChanged={onCellsChanged}\n    />\n  );\n}\n\nexport default App;","lang":"typescript","description":"Basic spreadsheet grid with edit cells via onCellsChanged callback, including CSS import."},"warnings":[{"fix":"Consider migrating to actively maintained alternatives.","message":"react-datasheet is no longer maintained. No bug fixes, security patches, or React 18+ compatibility guaranteed.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Use import 'react-datasheet/lib/react-datasheet.css'","message":"The CSS import path changed in v1.4.x. Using wrong path may cause missing styles.","severity":"breaking","affected_versions":">=1.4"},{"fix":"Use TypeScript to enforce types at compile time.","message":"PropTypes are not validated in production; no built-in TypeScript strict mode support.","severity":"deprecated","affected_versions":">=1.0"}],"env_vars":null,"search_vec":"'1.4.12':28 '16':47 'abandon':43 'activ':41 'altern':61 'callback':53 'cell':19 'compar':59 'compon':10,88 'copy/paste':21 'creat':12 'custom':25 'datasheet':3,6,71 'depend':78 'develop':42 'edit':58 'end':84 'excel':14 'excel-lik':13 'grid':17,57,66 'handsont':68 'includ':52 'javascript':85 'keyboard':22 'latest':31 'lightweight':74 'like':15,54,62 'longer':39 'mainten':83 'minim':77 'navig':23 'oncellschang':55 'project':36 'provid':48 'react':2,5,9,46,64,70,87,89 'react-compon':86 'react-datasheet':1,4,69 'react-spreadsheet-grid':63 'releas':33,80 'render':26 'select':20 'simpler':73 'spreadsheet':16,65 'stabl':32 'support':45 'type':50 'typescript':49,90 'version':27 'year':82","created_at":"2026-06-04T18:54:18.122625+00:00","updated_at":"2026-06-04T18:54:18.122625+00:00","problems":[{"fix":"Install package: npm install react-datasheet. Ensure TypeScript can resolve types (types included).","cause":"Missing type definitions or wrong import path","error":"Cannot find module 'react-datasheet' or its corresponding type declarations."},{"fix":"Add import 'react-datasheet/lib/react-datasheet.css' to your entry point.","cause":"CSS file not imported","error":"Styles not applied / grid looks unstyled"},{"fix":"Ensure onCellsChanged prop is passed as a function: onCellsChanged={changes => {...}}","cause":"Missing or incorrect prop","error":"onCellsChanged is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/nadbm/react-datasheet#readme","github":"https://github.com/nadbm/react-datasheet","docs":null,"changelog":null,"pypi":null,"npm":"react-datasheet","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}