Nomenclature Processing Machine
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-spreadsheet

0.4.19 • Public • Published

React Spreadsheet

Simple, customizable yet performant spreadsheet for React.

Screenshot FOSSA Status CircleCI Known Vulnerabilities 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, 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

install

npm i react-spreadsheet

Downloadsweekly downloads

9

version

0.4.19

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability