@iddan/react-spreadsheet

Simple, customizable yet performant spreadsheet for React

Stats

StarsIssuesVersionUpdatedCreatedSize
@iddan/react-spreadsheet
455220.1.183 years ago4 years agoMinified + gzip package size for @iddan/react-spreadsheet in KB

Readme

React Spreadsheet

Simple, customizable yet performant spreadsheet for React.

Screenshot FOSSA Status CircleCI Known Vulnerabilities Coverage Status

npm install @iddan/react-spreadsheet

or

yarn add @iddan/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

FOSSA Status

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.