spreadsheet-react
v1.0.1
Published
Excel-like table component built with React and TypeScript
Maintainers
Readme
Excel Table
A modern, Excel-like table component built with React and TypeScript.
Features
- ✏️ Editable Cells: Double-click or press Enter/F2 to edit cells
- ⌨️ Keyboard Navigation: Use arrow keys to navigate between cells
- ➕ Add Rows/Columns: Dynamically add rows and columns
- 🗑️ Delete Rows/Columns: Remove rows and columns with delete buttons
- 🎯 Cell Selection: Click to select cells with visual feedback
- 📱 Responsive: Scrollable table with sticky headers
Getting Started
Installation
npm installDevelopment
npm run devBuild
npm run buildUsage
The table component accepts the following props:
data: A 2D array of strings representing the table dataonCellChange: Callback function when a cell value changesonDeleteRow: Callback function when a row is deletedonDeleteColumn: Callback function when a column is deleted
Keyboard Shortcuts
- Enter/F2: Edit selected cell
- Arrow Keys: Navigate between cells
- Delete: Clear cell content
- Escape: Cancel editing
Technologies
- React 18
- TypeScript
- Vite
- CSS3
