React Spreadsheet Cell

Excel-like spreadsheet component for React with full keyboard navigation, multi-cell selection, copy/paste support, and high customization.
Perfect for building data-heavy, professional user interfaces inside your application.

Installation

npm install react-spreadsheet-cell

📚 Documentation

View Live Documentation & Examples →

Quick Use

import { SpreadsheetCellProvider, SpreadsheetCell } from 'react-spreadsheet-cell';
import 'react-spreadsheet-cell/styles.css';

function App() {
  const [cells, setCells] = useState({});

  return (
    <SpreadsheetCellProvider>
      <div className="grid grid-cols-3">
        {[...Array(9)].map((_, i) => (
          <SpreadsheetCell
            key={i}
            cellId={`0-${i}`}
            row={0}
            col={i}
            initialValue={cells[`0-${i}`] || ''}
            onValueChange={(value) => 
              setCells(prev => ({ ...prev, [`0-${i}`]: value }))
            }
          />
        ))}
      </div>
    </SpreadsheetCellProvider>
  );
}

Characteristics

• ⌨️ Full keyboard navigation (arrows, tab, enter)
• 🧠 Multi-cell selection (Shift + click / arrows)
• 📋 Copy & paste support (Ctrl/Cmd + C / V)
• 🖱️ Drag-to-select
• 🔢 Cell types: text, number, select
• 🎨 8 built-in color schemes
• 🧩 Fully customizable
• 🛡️ Written in TypeScript

Main Props

| Prop | Type | Description | |------|------|-------------| | cellId | string | Unique ID (format: "row-col") | | row | number | Row number | | col | number | Column number | | initialValue | string | Initial value | | cellType | 'text' \| 'number' \| 'select' | Cell type | | colorScheme | 'blue' \| 'purple' \| 'green'... | Color scheme | | onValueChange | (value: string) => void | Callback on change |

Keyboard Shortcuts

• Arrows → Navigate between cells
• Enter → Edit cell / Move down
• Tab → Move right
• Shift + Arrows / Click → Multi selection
• Ctrl/Cmd + C → Copy
• Ctrl/Cmd + V → Paste
• Delete → Clear cell
• Escape → Cancel editing

License

MIT

Autor

TKSOHLT - @TKSOHLT