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

# 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