From Prototype to Production: DataTable Component

The DataTable Challenge

Almost every web application needs a data table at some point: a list of users, orders, products, or logs that can be searched, sorted, filtered, and acted upon. Building this from scratch is a multi-day effort. The Aura UI Pro DataTable component gives you a production-ready solution in minutes.

Basic Setup

The DataTable works with Livewire 3 and follows a trait-based approach:

use BlueStarSystem\AuraUIPro\Traits\WithAuraDataTable;

class UserTable extends Component
{
    use WithAuraDataTable;

    public function columns(): array
    {
        return [
            'name' => ['label' => 'Name', 'sortable' => true, 'searchable' => true],
            'email' => ['label' => 'Email', 'sortable' => true, 'searchable' => true],
            'role' => ['label' => 'Role', 'sortable' => true],
            'created_at' => ['label' => 'Joined', 'sortable' => true],
        ];
    }

    public function query(): Builder
    {
        return User::query();
    }
}

And in your Blade view:

<x-aura::data-table :columns="$this->columns()" :rows="$rows">
    <x-slot:row let:row>
        <td>{{ $row->name }}</td>
        <td>{{ $row->email }}</td>
        <td><x-aura::badge>{{ $row->role }}</x-aura::badge></td>
        <td>{{ $row->created_at->format('M d, Y') }}</td>
    </x-slot:row>
</x-aura::data-table>

That is it. You get sortable column headers, a search bar, pagination, and responsive behavior out of the box.

Adding Filters

The WithAuraFilters trait lets you add dropdown filters:

use BlueStarSystem\AuraUIPro\Traits\WithAuraFilters;

class UserTable extends Component
{
    use WithAuraDataTable, WithAuraFilters;

    public function filters(): array
    {
        return [
            'role' => [
                'label' => 'Role',
                'options' => ['admin' => 'Admin', 'editor' => 'Editor', 'viewer' => 'Viewer'],
            ],
            'status' => [
                'label' => 'Status',
                'options' => ['active' => 'Active', 'inactive' => 'Inactive'],
            ],
        ];
    }
}

Filters render as styled <x-aura::select> dropdowns above the table and automatically modify the query.

Bulk Actions

Select multiple rows and perform actions on them:

use BlueStarSystem\AuraUIPro\Traits\WithAuraBulkActions;

class UserTable extends Component
{
    use WithAuraDataTable, WithAuraFilters, WithAuraBulkActions;

    public function bulkActions(): array
    {
        return [
            'activate' => 'Activate Selected',
            'deactivate' => 'Deactivate Selected',
            'delete' => 'Delete Selected',
        ];
    }

    public function bulkActivate(array $ids): void
    {
        User::whereIn('id', $ids)->update(['status' => 'active']);
        $this->notify('Users activated successfully.');
    }
}

Checkboxes appear on each row, a "Select All" toggle appears in the header, and the action buttons show when items are selected.

Customizing Cells

You can render any component inside table cells:

<x-slot:row let:row>
    <td class="flex items-center gap-3">
        <x-aura::avatar :src="$row->avatar_url" size="sm" />
        <div>
            <p class="font-medium">{{ $row->name }}</p>
            <p class="text-xs text-gray-500">{{ $row->department }}</p>
        </div>
    </td>
    <td>
        <x-aura::badge :variant="$row->status === 'active' ? 'success' : 'secondary'">
            {{ $row->status }}
        </x-aura::badge>
    </td>
    <td class="text-right">
        <x-aura::button variant="ghost" size="sm" wire:click="edit({{ $row->id }})">
            Edit
        </x-aura::button>
    </td>
</x-slot:row>