Building a Livewire Data Table: Sort, Search and Paginate

Almost every admin screen is a table: a list of users, orders, posts or products that you can sort, search and page through. This guide builds a data table in Livewire from first principles — sortable columns, live search and pagination — then shows when it makes sense to use a ready-made DataTable instead.

Building it by hand

Livewire makes a basic sortable, searchable table straightforward. Start with the component:

use Livewire\WithPagination;

class UsersTable extends Component
{
    use WithPagination;

    public string $search = '';
    public string $sortField = 'name';
    public string $sortDirection = 'asc';

    public function sortBy(string $field): void
    {
        $this->sortDirection = $this->sortField === $field
            ? ($this->sortDirection === 'asc' ? 'desc' : 'asc')
            : 'asc';
        $this->sortField = $field;
    }

    public function render()
    {
        return view('livewire.users-table', [
            'users' => User::query()
                ->when($this->search, fn ($q) =>
                    $q->where('name', 'like', "%{$this->search}%")
                      ->orWhere('email', 'like', "%{$this->search}%"))
                ->orderBy($this->sortField, $this->sortDirection)
                ->paginate(10),
        ]);
    }
}

The view wires the search box and sortable headers:

<x-aura::input type="search" wire:model.live.debounce.300ms="search" placeholder="Search users..." />

<x-aura::table>
    <x-aura::table.head>
        <x-aura::table.row>
            <x-aura::table.header>
                <button wire:click="sortBy('name')">Name</button>
            </x-aura::table.header>
            <x-aura::table.header>Email</x-aura::table.header>
        </x-aura::table.row>
    </x-aura::table.head>
    <x-aura::table.body>
        @foreach ($users as $user)
            <x-aura::table.row wire:key="{{ $user->id }}">
                <x-aura::table.cell>{{ $user->name }}</x-aura::table.cell>
                <x-aura::table.cell>{{ $user->email }}</x-aura::table.cell>
            </x-aura::table.row>
        @endforeach
    </x-aura::table.body>
</x-aura::table>

{{ $users->links() }}

The free Aura table component gives you the styled, accessible markup; Livewire handles the state. This is plenty for simple lists.

When to reach for a ready-made DataTable

Hand-rolling works until you need bulk actions, per-column filters, CSV/XLSX export, column toggling and row details. Re-implementing all of that — correctly, on every table — is a real time sink. That is where the Aura Pro DataTable earns its place: a single trait gives you sorting, filtering, bulk actions, export and row details, so a full-featured table is a config array instead of a few hundred lines.

Choosing your approach

• A simple, sortable, searchable list? Build it by hand with the free table component above.
• A production admin grid with filters, export and bulk actions? Use the Pro DataTable and skip the boilerplate.

Either way, install the components first:

composer require bluestarsystem/aura-ui
php artisan aura:install

See a table working inside a complete interface on the free dashboard starter.