@piyushnagar/react-spreadsheet-grid

React Spreadsheet Library

A powerful, reusable spreadsheet component built with React and TypeScript. Features Excel-like functionality including cell editing, drag-and-drop, filtering, and multiple data types.

Features

• 📊 Multiple Data Types: String, Number, Date, Boolean, and List columns
• 🎯 Cell Selection: Single cell, row, column, and range selection
• 📋 Copy/Paste: Full clipboard support with keyboard shortcuts
• 🔍 Filtering: Column-based filtering with search
• 🎨 Drag & Drop: Reorder rows and columns
• ↩️ Undo/Redo: Full history management
• 🎛️ Customizable: Configurable size, controls, and styling
• 📱 Responsive: Works on desktop and mobile devices

Installation

npm install
npm run dev

Basic Usage

import SpreadsheetGrid from './components/SpreadsheetGrid/SpreadsheetGrid';
import { SpreadsheetData } from './types/spreadsheet';

// Basic usage with default data
function App() {
  return (
    <div style={{ height: '400px' }}>
      <SpreadsheetGrid />
    </div>
  );
}

Advanced Usage

Custom Data Structure

import { useState } from 'react';
import SpreadsheetGrid from './components/SpreadsheetGrid/SpreadsheetGrid';
import { SpreadsheetData } from './types/spreadsheet';

function CustomSpreadsheet() {
  const [data, setData] = useState<SpreadsheetData>({
    columns: [
      { id: 'name', header: 'Name', type: 'string' },
      { id: 'age', header: 'Age', type: 'number' },
      { id: 'active', header: 'Active', type: 'boolean' },
      { id: 'joinDate', header: 'Join Date', type: 'date' },
      { id: 'skills', header: 'Skills', type: 'list' }
    ],
    rows: [
      {
        name: 'John Doe',
        age: 30,
        active: true,
        joinDate: '2023-01-15',
        skills: 'JavaScript'
      }
    ]
  });

  const handleDataChange = (newData: SpreadsheetData) => {
    setData(newData);
    // Save to database, localStorage, etc.
  };

  return (
    <div style={{ height: '500px' }}>
      <SpreadsheetGrid 
        data={data}
        onDataChange={handleDataChange}
        initialRows={25}
        initialCols={10}
        showControls={true}
        height="100%"
      />
    </div>
  );
}

Minimal Configuration

function MinimalSpreadsheet() {
  const minimalData = {
    columns: [
      { id: 'task', header: 'Task', type: 'string' },
      { id: 'completed', header: 'Done', type: 'boolean' }
    ],
    rows: [
      { task: 'Learn React', completed: true },
      { task: 'Build Spreadsheet', completed: false }
    ]
  };

  return (
    <SpreadsheetGrid 
      data={minimalData}
      showControls={false}
      initialRows={10}
      initialCols={5}
      className="custom-spreadsheet"
    />
  );
}

Props API

Prop	Type	Default	Description
data	SpreadsheetData	undefined	Initial data structure
initialRows	number	50	Number of rows to create
initialCols	number	20	Number of columns to create
onDataChange	(data: SpreadsheetData) => void	undefined	Callback when data changes
showControls	boolean	true	Show add row/column buttons
height	string	"100%"	Container height
className	string	""	Additional CSS classes

Data Types

Column Types

• string: Text input
• number: Numeric input with validation
• date: Date picker
• boolean: Yes/No dropdown
• list: Dropdown with unique values from column

Data Structure

interface SpreadsheetData {
  columns: Column[];
  rows: Record<string, any>[];
}

interface Column {
  id: string;           // Unique identifier
  header: string;       // Display name
  type: ColumnType;     // Data type
  width?: number;       // Column width (optional)
}

Keyboard Shortcuts

• Ctrl+C / Cmd+C: Copy selected cells
• Ctrl+V / Cmd+V: Paste cells
• Ctrl+Z / Cmd+Z: Undo
• Ctrl+Y / Cmd+Y: Redo
• Arrow Keys: Navigate cells
• Shift + Arrow: Select range
• Tab: Move to next cell
• Enter: Move to cell below
• Escape: Cancel editing

Features in Detail

Cell Editing

• Double-click or press Enter to edit
• Different input types based on column type
• Auto-save on blur or Enter

Selection

• Click for single cell
• Drag for range selection
• Ctrl+Click for multiple selection
• Click row/column headers for full selection

Filtering

• Click filter icon in column headers
• Search and select values to filter
• Multiple column filters supported

Drag & Drop

• Drag row headers to reorder rows
• Drag column headers to reorder columns
• Drag cell handle to fill down values

Styling

The component uses CSS modules and can be customized with:

.custom-spreadsheet {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
}

.custom-spreadsheet .cell {
  font-size: 14px;
}

.custom-spreadsheet .column-header {
  background-color: #f8fafc;
  font-weight: 600;
}

Examples

Check out the src/examples/ExampleComponent.tsx file for comprehensive examples including:

• Basic spreadsheet
• Custom data with change handlers
• Minimal configuration
• Employee management system
• Data export functionality

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Contributing

• Fork the repository
• Create a feature branch
• Make your changes
• Add tests if applicable
• Submit a pull request

License

MIT License - see LICENSE file for details