# React Spreadsheet
Simple, customizable yet performant spreadsheet for React.
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fiddan%2Freact-spreadsheet?ref=badge_shield)
[](https://circleci.com/gh/iddan/react-spreadsheet)
[](https://snyk.io/test/github/iddan/react-spreadsheet?targetFile=package.json)
[](https://coveralls.io/github/iddan/react-spreadsheet?branch=master)
```bash
npm install react-spreadsheet
```
_or_
```bash
yarn add react-spreadsheet
```
### Features
- Simple straightforward API focusing on common use cases while keeping flexibility
- Performant (yet not virtualized)
- Implements Just Components™
### [Demo](https://iddan.github.io/react-spreadsheet)
### Usage
#### Getting Started
```javascript
import React from "react";
import Spreadsheet from "react-spreadsheet";
const data = [
[{ value: "Vanilla" }, { value: "Chocolate" }],
[{ value: "Strawberry" }, { value: "Cookies" }]
];
const MyComponent = () => ;
```
#### Custom Components
```javascript
import React from "react";
import Spreadsheet from "react-spreadsheet";
const RangeView = ({ cell, getValue }) => (
);
const RangeEdit = ({ getValue, cell, onChange }) => (
{
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 = () => ;
```
### Prior Art
- [React Datasheet](https://nadbm.github.io/react-datasheet/) - Heavily inspired by, enhanced performance and API, no formulas
- [React Spreadsheet Grid](https://denisraslov.github.io/grid/) - Virtualized, lacks significant UI parts, no formulas
- [Handsonetable](https://handsontable.com/) - Virtualized, lacks dynamic customization. React Spreadsheet uses it's formulas parsing module
## License
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fiddan%2Freact-spreadsheet?ref=badge_large)
