npm package: @piyushnagar/react-spreadsheet-grid
Description: 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.
Author: Your Name
Latest version: 1.0.1

# 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

```bash
npm install
npm run dev
```

## Basic Usage

```tsx
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

```tsx
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

```tsx
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

```tsx
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:

```css
.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

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

## License

MIT License - see LICENSE file for details