/react-spreadsheet

Simple, customizable yet performant spreadsheet for React

Primary LanguageTypeScriptMIT LicenseMIT

React Spreadsheet

Simple, customizable yet performant spreadsheet for React.

Screenshot FOSSA Status CI Coverage Status

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 }) => (
  <input
    type="range"
    value={cell.value}
    disabled
    style={{ pointerEvents: "none" }}
  />
);

const RangeEdit = ({ cell, onChange }) => (
  <input
    type="range"
    onChange={(e) => {
      onChange({ ...cell, value: e.target.value });
    }}
    value={cell.value || 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

FOSSA Status