npm package: @piyushnagar/react-editable-table-v2
Description: A comprehensive, feature-rich React table component with inline editing, sorting, filtering, column resizing, and more
Author: Your Name
Latest version: 1.0.0

# React Editable Table

A comprehensive, feature-rich React table component with inline editing, sorting, filtering, column resizing, drag-and-drop row reordering, and much more.

## Features

- ✅ **Inline Editing** - Edit cells directly with support for multiple data types
- ✅ **Column Types** - Text, Number, Integer, Date, Select, Multi-Select, Boolean
- ✅ **Sorting & Filtering** - Advanced column-based filtering with search
- ✅ **Column Resizing** - Drag to resize columns with minimum width constraints
- ✅ **Row Management** - Add, delete, and reorder rows with drag-and-drop
- ✅ **Keyboard Navigation** - Full keyboard support with arrow keys, Tab, Enter
- ✅ **Copy/Paste** - Excel-like copy/paste functionality with clipboard support
- ✅ **Context Menus** - Right-click menus for cells and rows
- ✅ **Pagination** - Built-in pagination with configurable page sizes
- ✅ **CSV Export** - Export table data to CSV format
- ✅ **TypeScript** - Full TypeScript support with comprehensive type definitions
- ✅ **Responsive** - Mobile-friendly design with horizontal scrolling
- ✅ **Customizable** - Extensive configuration options and styling

## Installation

```bash
npm install @your-org/react-editable-table
```

## Quick Start

```tsx
import React, { useState } from 'react';
import { EditableTable, TableColumn, TableRow } from '@your-org/react-editable-table';
import '@your-org/react-editable-table/styles';

const columns: TableColumn[] = [
  {
    id: 'name',
    title: 'Name',
    type: 'text',
    width: 200,
    sortable: true,
    editable: true,
    required: true,
  },
  {
    id: 'email',
    title: 'Email',
    type: 'text',
    width: 250,
    sortable: true,
    editable: true,
  },
  {
    id: 'age',
    title: 'Age',
    type: 'integer',
    width: 100,
    sortable: true,
    editable: true,
  },
  {
    id: 'department',
    title: 'Department',
    type: 'select',
    options: ['Engineering', 'Marketing', 'Sales', 'HR'],
    width: 150,
    sortable: true,
    editable: true,
  },
  {
    id: 'active',
    title: 'Active',
    type: 'boolean',
    width: 100,
    sortable: true,
    editable: true,
  },
];

const initialData: TableRow[] = [
  {
    id: '1',
    name: 'John Doe',
    email: 'john@example.com',
    age: 30,
    department: 'Engineering',
    active: true,
  },
  // ... more data
];

function App() {
  const [data, setData] = useState<TableRow[]>(initialData);
  const [tableColumns, setTableColumns] = useState<TableColumn[]>(columns);

  return (
    <EditableTable
      columns={tableColumns}
      data={data}
      sortable={true}
      filterable={true}
      addRows={true}
      deleteRows={true}
      pagination={{ enabled: true, pageSize: 10 }}
      onDataChange={setData}
      onColumnChange={setTableColumns}
    />
  );
}
```

## Column Types

### Text
```tsx
{
  id: 'name',
  title: 'Name',
  type: 'text',
  width: 200,
  editable: true,
  required: true,
}
```

### Number & Integer
```tsx
{
  id: 'salary',
  title: 'Salary',
  type: 'number', // Supports decimals
  width: 120,
  editable: true,
}

{
  id: 'age',
  title: 'Age',
  type: 'integer', // Whole numbers only
  width: 80,
  editable: true,
}
```

### Date
```tsx
{
  id: 'startDate',
  title: 'Start Date',
  type: 'date',
  width: 140,
  editable: true,
}
```

### Select (Dropdown)
```tsx
{
  id: 'department',
  title: 'Department',
  type: 'select',
  options: ['Engineering', 'Marketing', 'Sales', 'HR'],
  width: 150,
  editable: true,
}
```

### Multi-Select
```tsx
{
  id: 'skills',
  title: 'Skills',
  type: 'multiselect',
  options: ['JavaScript', 'Python', 'React', 'Node.js'],
  width: 200,
  editable: true,
  multiple: true,
}
```

### Boolean
```tsx
{
  id: 'active',
  title: 'Active',
  type: 'boolean',
  width: 100,
  editable: true,
}
```

## Configuration Options

### Table Configuration
```tsx
interface TableConfig {
  columns: TableColumn[];
  data: TableRow[];
  sortable?: boolean;           // Enable sorting (default: true)
  filterable?: boolean;         // Enable filtering (default: true)
  addRows?: boolean;           // Allow adding rows (default: true)
  deleteRows?: boolean;        // Allow deleting rows (default: true)
  addColumns?: boolean;        // Allow adding columns (default: false)
  deleteColumns?: boolean;     // Allow deleting columns (default: false)
  pagination?: {
    enabled: boolean;
    pageSize?: number;          // Items per page (default: 10)
  };
  onDataChange?: (data: TableRow[]) => void;
  onColumnChange?: (columns: TableColumn[]) => void;
}
```

### Column Configuration
```tsx
interface TableColumn {
  id: string;                  // Unique identifier
  title: string;               // Display name
  type: 'text' | 'number' | 'integer' | 'date' | 'select' | 'multiselect' | 'boolean';
  width?: number;              // Column width in pixels
  required?: boolean;          // Required field validation
  options?: string[];          // Options for select/multiselect
  sortable?: boolean;          // Enable sorting for this column
  editable?: boolean;          // Enable editing for this column
  multiple?: boolean;          // For multiselect type
}
```

## Keyboard Shortcuts

- **Arrow Keys** - Navigate between cells
- **Tab / Shift+Tab** - Navigate to next/previous cell
- **Enter** - Start editing selected cell
- **Escape** - Cancel editing
- **Delete / Backspace** - Clear cell content
- **Ctrl+C** - Copy selected cells
- **Ctrl+V** - Paste clipboard content
- **Ctrl+X** - Cut selected cells

## Advanced Usage

### Custom Data Validation
```tsx
import { validateRowData } from '@your-org/react-editable-table';

const errors = validateRowData(rowData, columns);
if (errors.length > 0) {
  console.log('Validation errors:', errors);
}
```

### Sample Data Generation
```tsx
import { createSampleData } from '@your-org/react-editable-table';

const sampleData = createSampleData(columns, 100); // Generate 100 sample rows
```

### Using Hooks Directly
```tsx
import { useClipboard, useColumnFilters } from '@your-org/react-editable-table';

// Use individual hooks for custom implementations
const { copyToClipboard, pasteFromClipboard } = useClipboard({
  data,
  columns,
  selectedCell,
  selectionRange,
  onDataChange,
});
```

## Styling

The component uses Tailwind CSS classes. Import the styles:

```tsx
import '@your-org/react-editable-table/styles';
```

Or if you're using Tailwind CSS in your project, the component will inherit your theme.

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Changelog

### v1.0.0
- Initial release
- Full feature set with inline editing, sorting, filtering
- Column resizing and drag-and-drop row reordering
- Configurable pagination with customizable page size
- TypeScript support
- Comprehensive documentation