npm package: @happy-table/vue3
Description: A high-performance Vue 3 table component for B2B systems with TypeScript support
Author: Aaron Zhou
Latest version: 0.2.7

# Vue Table Component

A high-performance Vue 3 table component for B2B systems with TypeScript support.

## Features

- 🚀 Vue 3 + TypeScript
- 🎨 Tailwind CSS 4 with theme system
- 📱 Responsive design
- ⚡ Virtual scrolling for large datasets
- 🎯 Full keyboard navigation
- 🌙 Dark mode support
- 📊 Sorting, filtering, and pagination
- ✏️ Inline editing
- 📤 Data export (CSV, Excel)
- ♿ Accessibility compliant

* ### Core & Styling
  - **Framework**: Built with Vue 3 and TypeScript for a modern, type-safe development experience.
  - **Styling**: Styled with Tailwind CSS 4, providing a utility-first CSS workflow.
  - **Theming**: A flexible theme system with out-of-the-box support for dark mode.

* ### High Performance
  - **Virtual Scrolling**: Handles massive datasets with ease, supporting both vertical and horizontal virtualization.

* ### Column Customization
  - **Fixed Columns**: Pin columns to the left or right for better visibility.
  - **Resizable Columns**: Allow users to drag and adjust column widths.
  - **Draggable Reordering**: Users can easily rearrange columns to their preference.
  - **Functional Columns**: Built-in support for sequence number (`seq`) and selection columns.
  - **Smart Sizing**: Automatic width calculation based on title, with `minWidth` and `maxWidth` constraints.

* ### Data Interaction
  - **Advanced Sorting**: Supports multi-column sorting with clear priority indicators.
  - **Advanced Filtering**:
    - Rich per-column filtering UI.
    - Automatic filter type detection (Text, Number, Date, Boolean, Select).
    - A wide range of operators (e.g., contains, equals, range).
    - Support for cascade filtering.
  - **Pagination**: Fully-featured pagination controls to navigate through large datasets.

* ### Row & Cell Features
  - **Row Selection**: Both single and multiple row selection modes are available.
  - **Inline Editing**: Edit cell data directly within the table.
  - **Custom Rendering**: Use custom Vue components or template strings for complex cell content.
  - **Visual Cues**: Configurable hover effects (row or cell) and stripe styling for better readability.

* ### Usability
  - **State Handling**: Clear loading, empty, and error states.
  - **Accessibility**: ARIA attributes and keyboard navigation support (work in progress).
  - **Responsive Design**: Adapts to various screen sizes.

## Dependencies

- **Vue 3**

*     "vue": "^3.5.21"

- **TypeScript**

*     "typescript": "^5.9.2",
*     "typescript-eslint": "^8.42.0",

- **Tailwind CSS**

*     "tailwindcss": "^4.1.13",
*     "@tailwindcss/vite": "^4.1.13",

- **Vite**

*     "vite": "^7.1.4",
*     "vite-plugin-dts": "^4.5.4",

- **Iconify**

*     "@iconify/icons-lucide": "^1.2.135",
*     "@iconify/icons-mdi": "^1.2.48",
*     "@iconify/vue": "^5.0.0",

## Development Setup

```code
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Build library
npm run build:lib

# Run tests
npm run test

# Run tests with coverage
npm run test:coverage

# Lint code
npm run lint

# Format code
npm run format
```

## Project Structure

```
src/
├── components/          # Vue components
│   └── Table/          # Table component and its sub-components
│       └── filters/    # Column filter components for different data types
├── composables/        # Vue composables for sorting, filtering, etc.
├── types/             # TypeScript type definitions
├── utils/             # Utility functions
└── styles/            # CSS and theme files
    └── themes/        # Theme configurations
```

## License

MIT