ExceLike Table

A powerful, feature-rich React table library with Excel-like filtering, column pinning, and dynamic sizing capabilities.

✨ Features

• 🔍 Excel-like Filtering: Hierarchical date filters, range sliders, checkbox selections
• 📌 Column Pinning: Pin columns to the left with sticky positioning
• 📏 Dynamic Sizing: Responsive height adjustment based on available space
• 🎯 Smart Positioning: Intelligent dropdown positioning to prevent cutoff
• 🔄 Column Management: Show/hide columns with real-time preview
• 📊 Advanced Sorting: Multi-type data sorting (text, numbers, dates)
• 📱 Responsive Design: Works seamlessly across different screen sizes
• 🎨 Customizable: Flexible styling and theming options
• 📦 Zero Dependencies: No external UI library dependencies
• 🔷 TypeScript: Full TypeScript support with comprehensive type definitions

🚀 Quick Start

Installation

npm install excelike-table
# or
yarn add excelike-table

Basic Usage

import React from 'react';
import { EnhancedTable, TableColumn } from 'excelike-table';
import 'excelike-table/dist/lib/styles.css'; // Import CSS styles

interface Employee {
  id: number;
  name: string;
  department: string;
  salary: number;
  joinDate: string;
}

const columns: TableColumn<Employee>[] = [
  {
    key: 'name',
    title: '名前',
    dataIndex: 'name',
    sortable: true,
    filterable: true,
  },
  {
    key: 'department',
    title: '部署',
    dataIndex: 'department',
    sortable: true,
    filterable: true,
  },
  {
    key: 'salary',
    title: '給与',
    dataIndex: 'salary',
    sortable: true,
    filterable: true,
    render: (value) => `¥${value.toLocaleString()}`,
  },
  {
    key: 'joinDate',
    title: '入社日',
    dataIndex: 'joinDate',
    sortable: true,
    filterable: true,
    filterType: 'date-hierarchy',
  },
];

const data: Employee[] = [
  {
    id: 1,
    name: '田中太郎',
    department: '営業部',
    salary: 5000000,
    joinDate: '2021-04-01',
  },
  // ... more data
];

function App() {
  return (
    <EnhancedTable
      data={data}
      columns={columns}
      rowKey="id"
      pagination={{
        pageSize: 20,
        showSizeChanger: true,
        showTotal: (total, range) => 
          `${range[0]}-${range[1]} of ${total} items`,
      }}
    />
  );
}

📖 API Reference

EnhancedTable Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | T[] | - | Table data array | | columns | TableColumn<T>[] | - | Column configuration | | rowKey | keyof T | - | Unique key for each row | | pagination | PaginationConfig | - | Pagination settings | | loading | boolean | false | Loading state | | size | 'small' \| 'middle' \| 'large' | 'middle' | Table size | | bordered | boolean | true | Show borders | | className | string | - | Custom CSS class | | style | CSSProperties | - | Custom styles |

TableColumn Properties

| Property | Type | Description | |----------|------|-------------| | key | string | Unique column identifier | | title | string | Column header title | | dataIndex | keyof T | Data field key | | width | number | Column width in pixels | | sortable | boolean | Enable sorting | | filterable | boolean | Enable filtering | | filterType | 'text' \| 'select' \| 'date-hierarchy' | Filter type | | render | (value, record, index) => ReactNode | Custom cell renderer |

🎨 Advanced Features

Column Pinning

Pin important columns to the left for easy access during horizontal scrolling:

// Access column settings through the table menu (⚙️ icon)
// Check the 📌 pin checkbox for desired columns

Date Hierarchy Filtering

Perfect for time-series data with year/month/day breakdown:

{
  key: 'date',
  title: 'Date',
  dataIndex: 'date',
  filterType: 'date-hierarchy', // Enables hierarchical date filtering
  filterable: true,
}

Range Filtering

Numeric columns automatically get range sliders:

{
  key: 'salary',
  title: 'Salary',
  dataIndex: 'salary',
  filterable: true, // Auto-detects numeric data and adds range slider
}

Custom Rendering

{
  key: 'status',
  title: 'Status',
  dataIndex: 'status',
  render: (value) => (
    <span className={`status-${value}`}>
      {value.toUpperCase()}
    </span>
  ),
}

🎯 Features in Detail

🔍 Intelligent Filtering

• Text Filters: Search with real-time filtering
• Checkbox Filters: Multi-select with "select all" functionality
• Range Filters: Dual sliders for numeric data
• Date Hierarchy: Year > Month > Day structure
• Empty Value Handling: Special handling for null/empty values

📌 Column Management

• Dynamic Pinning: Pin/unpin columns via settings modal
• Real-time Preview: See changes before applying
• Automatic Positioning: Pinned columns stay on the left
• Width Preservation: Maintains custom column widths

📱 Responsive Design

• Dynamic Heights: Adapts to available screen space
• Smart Positioning: Prevents dropdown cutoff
• Touch Friendly: Works well on mobile devices
• Flexible Layout: Adjusts to container constraints

🔧 Development

Local Development

# Clone the repository
git clone https://github.com/your-username/excelike-table.git
cd excelike-table

# Install dependencies
npm install

# Start development server
npm start

# Build library
npm run build:lib

# Run tests
npm test

Build for Production

npm run build:lib

This generates optimized bundles in the dist/ directory.

📄 License

MIT © [Your Name]

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

If you encounter any issues or have questions, please create an issue on GitHub.