Table Component

A versatile table component with dynamic headers, content, infinite scroll, sorting, pagination, and copy functionality.

Overview

The Table component provides:

Dynamic header configuration with sorting capabilities
Flexible data display with custom cell content
Built-in sorting (client-side and server-side)
Pagination support with customizable page sizes
Infinite scroll functionality
Hover effects and alternate row coloring
Keyboard navigation and accessibility features
Customizable styling and layout

When to Use

Use the Table component when you need to:

Display structured data in a tabular format
Show large datasets with pagination or infinite scroll
Provide sortable columns for data analysis
Create interactive data tables with custom cell content
Build data dashboards and admin interfaces
Display user lists, product catalogs, or financial data
Create responsive data tables with modern UX

Key Features

Dynamic Headers: Configurable column headers with text, keys, and styling
Sorting: Client-side and server-side sorting with visual indicators
Pagination: Built-in pagination with Previous/Next navigation
Infinite Scroll: Load more data automatically when scrolling to bottom
Custom Cell Content: Slot-based customization for cell rendering
Hover Effects: Optional row hover highlighting
Alternate Row Colors: Optional alternating row background colors
Alternate Column Colors: Optional alternating column background colors
Copy Functionality: Copy cell values to clipboard with one click
Custom Column Widths: Set custom widths per column or use default
Responsive Design: Adapts to different screen sizes
Accessibility: Keyboard navigation and ARIA support
Async Mode: Support for server-side data handling
Custom Styling: Flexible CSS classes for headers and cells

API Reference →