React Spreadsheet

Simple

Straightforward API focusing on common use cases while keeping flexibility. Just import the component, pass your data, and you're ready to go.

import Spreadsheet from "react-spreadsheet";

function Simple() {
  const [data, setData] = useState([
    [{ value: "" }, { value: "" }],
    [{ value: "" }, { value: "" }],
  ]);
  
  return (
    <Spreadsheet 
      data={data} 
      onChange={setData} 
    />
  );
}

	A	B
1
2

Performant

Draw and update tables with many columns and rows without virtualization. Handles large datasets efficiently with minimal re-renders.

import Spreadsheet from "react-spreadsheet";

function Performant() {
  const [data, setData] = useState(
    createEmptyMatrix(20, 10)
  );
  
  return (
    <Spreadsheet 
      data={data} 
      onChange={setData} 
    />
  );
}

	A	B	C	D	E	F	G	H	I	J
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Just Components™

The Spreadsheet is just a component, compose it easily with other components and data. Use custom DataViewer and DataEditor components to create specialized cell types.

import Spreadsheet from "react-spreadsheet";
import { RatingViewer } from "./RatingViewer";
import { RatingEditor } from "./RatingEditor";

function JustComponents({ data, onChange }) {
  return (
    <Spreadsheet
      data={data}
      onChange={onChange}
      DataViewer={RatingViewer}
      DataEditor={RatingEditor}
    />
  );
}

	A	B
1	☆☆☆☆☆ (0)	☆☆☆☆☆ (0)
2	☆☆☆☆☆ (0)	★★★★★ (5)
3	☆☆☆☆☆ (0)	★★★★☆ (4)
4	☆☆☆☆☆ (0)	★★★★★ (5)