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

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

Quick Start

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: '[email protected]',
    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

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

Number & Integer

{
  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

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

Select (Dropdown)

{
  id: 'department',
  title: 'Department',
  type: 'select',
  options: ['Engineering', 'Marketing', 'Sales', 'HR'],
  width: 150,
  editable: true,
}

Multi-Select

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

Boolean

{
  id: 'active',
  title: 'Active',
  type: 'boolean',
  width: 100,
  editable: true,
}

Configuration Options

Table Configuration

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;
  };
  onDataChange?: (data: TableRow[]) => void;
  onColumnChange?: (columns: TableColumn[]) => void;
}

Column Configuration

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

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

import { createSampleData } from '@your-org/react-editable-table';

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

Using Hooks Directly

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:

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 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
• TypeScript support
• Comprehensive documentation