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
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
License
