React Spreadsheet
Simple, customizable yet performant spreadsheet for React.
npm install react-spreadsheetor
yarn add react-spreadsheetFeatures
- Simple straightforward API focusing on common use cases while keeping flexibility
- Performant (yet not virtualized)
- Implements Just Components™
Demo
Usage
Getting Started
import React from "react"; import Spreadsheet from "react-spreadsheet"; const data = [ [{ value: "Vanilla" }, { value: "Chocolate" }], [{ value: "Strawberry" }, { value: "Cookies" }] ]; const MyComponent = () => <Spreadsheet data={data} />;Custom Components
import React from "react"; import Spreadsheet from "react-spreadsheet"; const RangeView = ({ cell, getValue }) => ( <input type="range" value={getValue({ data: cell })} disabled style={{ pointerEvents: "none" }} /> ); const RangeEdit = ({ getValue, cell, onChange }) => ( <input type="range" onChange={e => { onChange({ ...cell, value: e.target.value }); }} value={getValue({ data: cell }) || 0} autoFocus /> ); const data = [ [{ value: "Flavors" }], [({ value: "Vanilla" }, { value: "Chocolate" })], [{ value: "Strawberry" }, { value: "Cookies" }], [ { value: "How much do you like ice cream?" }, { value: 100, DataViewer: RangeView, DataEditor: RangeEdit } ] ]; const MyComponent = () => <Spreadsheet data={data} />;Prior Art
- React Datasheet - Heavily inspired by, enhanced performance and API, no formulas
- React Spreadsheet Grid - Virtualized, lacks significant UI parts, no formulas
- Handsonetable - Virtualized, lacks dynamic customization. React Spreadsheet uses it's formulas parsing module
