React Spreadsheet

Qué es

React Spreadsheet es una librería de componentes para React, creada por Iddan Aaronsohn, que ofrece una hoja de cálculo editable lista para integrar. Está escrita en TypeScript y se distribuye en npm como react-spreadsheet. Su filosofía es ser “solo un componente”: se renderiza como cualquier otro elemento React y se controla mediante una matriz bidimensional de celdas y un callback de cambios. Se publica bajo licencia MIT.

Para qué sirve

• Mostrar y editar datos tabulares dentro de una app React, con la experiencia de una hoja de cálculo.
• Permitir al usuario editar valores celda a celda con un estado controlado (data + onChange).
• Renderizar tipos de celda personalizados (selectores, ratings, etc.) mediante DataViewer y DataEditor.
• Trabajar con tablas de muchas filas y columnas sin necesidad de virtualización.

Cuándo usarlo

Es buena opción cuando necesitas una hoja de cálculo ligera y editable sin la complejidad de un data grid completo. Si tu caso exige funciones avanzadas (filtros, agrupaciones, virtualización agresiva, fórmulas complejas o grandes volúmenes con scroll infinito), conviene valorar alternativas como AG Grid, Handsontable o TanStack Table. Para edición tabular sencilla y personalizable, React Spreadsheet es directo y poco intrusivo.

Ejemplo

Instalación:

npm install react-spreadsheet

Uso básico con estado controlado:

import { useState } from 'react';
import Spreadsheet from 'react-spreadsheet';

function App() {
  const [data, setData] = useState([
    [{ value: 'Producto' }, { value: 'Precio' }],
    [{ value: 'Café' }, { value: '2.50' }],
    [{ value: 'Té' }, { value: '1.80' }],
  ]);

  return <Spreadsheet data={data} onChange={setData} />;
}

Puntos clave

• API minimalista: una matriz de objetos { value } y un onChange para controlar el estado.
• Celdas personalizables vía las props DataViewer y DataEditor.
• Escrita en TypeScript, con tipados incluidos y demo interactiva basada en Storybook.
• Maneja muchas filas y columnas sin virtualización, minimizando los re-renders.

Ten en cuenta

Proyecto activo y mantenido (última versión estable v0.10.0). No es un data grid empresarial: para virtualización avanzada, filtrado, ordenación compleja o motores de fórmulas conviene recurrir a soluciones especializadas. Al no usar virtualización por defecto, las tablas muy grandes pueden afectar al rendimiento según el caso. Revisa la documentación oficial para conocer todas las props y opciones de personalización.