📊 Data Display

<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="sparkles-table-container">
    <!-- Table implementation -->
</div>

<div x-data="sparklesDataTable({
    data: products,
    selectable: true,
    columns: [
        { key: 'select', label: '', type: 'checkbox' },
        { key: 'name', label: 'Product Name', sortable: true }
    ]
})" class="sparkles-table-container">
    <!-- Bulk actions and table implementation -->
</div>

<table class="sparkles-table sparkles-table-stack">
    <!-- Automatically stacks on mobile with data-label attributes -->
    <td data-label="Customer Name">John Doe</td>
</table>