📊 Data Display

Charts, graphs, tables, and analytics visualization components

🗃️ Basic Data Table

Standard data table with sorting and search functionality

Loading data...

📭

No orders found

Try adjusting your search criteria

Showing to of results

`); alert('Code copied!');" class="text-sm bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors" > 📋 Copy Code

☑️ Selectable Table with Bulk Actions

Data table with row selection and bulk action capabilities

item(s) selected

Total Products: | Selected:

Last updated: May 2, 2026 at 4:26 PM

`); alert('Code copied!');" class="text-sm bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors" > 📋 Copy Code

📱 Responsive Stacked Table

Table that stacks on mobile devices for better usability

Page of

📱 Mobile Responsive Behavior

On screens smaller than 475px, this table automatically stacks into cards. Try resizing your browser window to see the effect.

`); alert('Code copied!');" class="text-sm bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors" > 📋 Copy Code

📏 Table Size Variants

Different table densities for various use cases

Compact Table

Product	SKU	Price	Stock
Wireless Mouse	WM-001	$29.99	156
USB Keyboard	KB-002	$59.99	89
Monitor Stand	MS-003	$79.99	34

Large Table

Order Details	Customer Information	Payment Details
ORD-2025-001 3 items • Jan 20, 2025	Sarah Johnson [email protected]	$234.99 Credit Card
ORD-2025-002 1 item • Jan 19, 2025	Mike Chen [email protected]	$89.50 PayPal

`); alert('Code copied!');" class="text-sm bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors" > 📋 Copy Code

Usage Examples

// Basic Data Table Setup

<div x-data="sparklesDataTable({
    data: orders,
    columns: [
        { key: 'id', label: 'Order ID', sortable: true },
        { key: 'customer', label: 'Customer', sortable: true },
        { key: 'total', label: 'Total', sortable: true, type: 'currency' }
    ],
    pageSize: 10
   })" class="overflow-x-auto rounded-2xl border border-gray-200 bg-white shadow-sm">
    <!-- Table implementation -->
</div>

// Selectable Table with Bulk Actions

<div x-data="sparklesDataTable({
    data: products,
    selectable: true,
    columns: [
        { key: 'select', label: '', type: 'checkbox' },
        { key: 'name', label: 'Product Name', sortable: true }
    ]
   })" class="overflow-x-auto rounded-2xl border border-gray-200 bg-white shadow-sm">
    <!-- Bulk actions and table implementation -->
</div>

// Responsive Stacked Table

<div class="overflow-x-auto rounded-2xl border border-gray-200 bg-white shadow-sm">
    <table class="min-w-[640px] border-separate border-spacing-0 text-sm text-gray-700">
        <td class="border-b border-gray-200 px-4 py-3" data-label="Customer Name">John Doe</td>
    </table>
</div>

Performance & Accessibility

Performance Features

• Virtual scrolling support for datasets with 1000+ rows to maintain smooth performance
• Debounced search input prevents excessive API calls during rapid typing
• Pagination reduces DOM size and improves rendering performance
• Optimized sorting algorithms handle large datasets efficiently

Accessibility Support

• Full keyboard navigation with arrow keys, Enter, and Space support
• ARIA labels and live regions announce sorting changes to screen readers
• Mobile stacked layout uses data-label attributes for semantic content
• High contrast focus indicators and reduced motion support for accessibility