Appearance
Table Component
A versatile table component with dynamic headers, content, infinite scroll, sorting, filtering, and row selection.
Overview
The Table component provides:
- Dynamic header configuration with sorting and filtering capabilities
- Flexible data display with custom cell content
- Built-in sorting (client-side and server-side)
- Column filtering with checkbox-based filter menus
- Row selection with checkboxes
- Infinite scroll functionality
- Hover effects
- Customizable styling and layout
- Async mode for server-side data handling
When to Use
Use the Table component when you need to:
- Display structured data in a tabular format
- Show large datasets with infinite scroll
- Provide sortable columns for data analysis
- Filter data by column values
- Select multiple rows for bulk operations
- 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 (asc/desc/none)
- Filtering: Column-based filtering with checkbox menus and custom filter options
- Row Selection: Select individual rows or all rows with checkboxes
- Infinite Scroll: Load more data automatically when scrolling to bottom
- Custom Cell Content: Slot-based customization for cell rendering
- Custom Header Content: Slot-based customization for header rendering
- Custom Filter Content: Slot-based customization for filter menu content
- Hover Effects: Optional row hover highlighting
- Custom Column Widths: Set custom widths per column or use default
- Responsive Design: Adapts to different screen sizes with horizontal scrolling
- Async Mode: Support for server-side data handling (sorting, filtering)
- Custom Styling: Flexible CSS classes for headers and cells