React Spreadsheet

Simple, customizable yet performant spreadsheet for React.

npm install react-spreadsheet

or

yarn add react-spreadsheet

Features

• Simple straightforward API focusing on common use cases while keeping flexibility
• Performant (yet not virtualized)
• Implements Just Components™

Demo

Usage

Getting Started

importReactfrom"react";importSpreadsheetfrom"react-spreadsheet";constdata=[[{value: "Vanilla"},{value: "Chocolate"}],[{value: "Strawberry"},{value: "Cookies"}]];constMyComponent=()=><Spreadsheetdata={data}/>;

Custom Components

importReactfrom"react";importSpreadsheetfrom"react-spreadsheet";constRangeView=({ cell, getValue })=>(<inputtype="range"value={getValue({data: cell})}disabledstyle={{pointerEvents: "none"}}/>);constRangeEdit=({ getValue, cell, onChange })=>(<inputtype="range"onChange={e=>{onChange({ ...cell,value: e.target.value});}}value={getValue({data: cell})||0}autoFocus/>);constdata=[[{value: "Flavors"}],[({value: "Vanilla"},{value: "Chocolate"})],[{value: "Strawberry"},{value: "Cookies"}],[{value: "How much do you like ice cream?"},{value: 100,DataViewer: RangeView,DataEditor: RangeEdit}]];constMyComponent=()=><Spreadsheetdata={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

License