Spreadsheet

A simple react spreadsheet component.

Installation

npm i @amedoeyes/spreadsheet

Usage

import Spreadsheet, { Cells } from "@amedoeyes/spreadsheet";
import { useState } from "react";

export default function App() {
	const [cells, setCells] = useState<Cells>([
		[{ value: "" }, { value: "" }, { value: "" }],
		[{ value: "" }, { value: "" }, { value: "" }],
		[{ value: "" }, { value: "" }, { value: "" }],
	]);

	const handleChange = (cells: Cells) => setCells(cells);

	return <Spreadsheet cells={cells} onChange={handleChange} />;
}

Types

type Cell = {
	value: number | string;
	locked?: boolean;
	inputMode?:
		| "search"
		| "text"
		| "none"
		| "tel"
		| "url"
		| "email"
		| "numeric"
		| "decimal";
};

type Cells = Array<Array<Cell>>;

Styling

You can style it by using the following classes:

 spreadsheet
 spreadsheet--dark
 spreadsheet__body
 spreadsheet__cell
 spreadsheet__cell-header
 spreadsheet__cell-input