react-spreadsheet's Introduction

React Spreadsheet

Simple, customizable yet performant spreadsheet for React.

npm install react-spreadsheet

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