Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Laravel

Livewire Data Tables Pattern

Build sortable, searchable data tables with Livewire.

16 January 20261 min readLaravelاقرأ بالعربية

On this page

  1. Component
  2. Query

Data table component:

Component

php
class UsersTable extends Component
{
    #[Url]
    public $search = '';
    
    #[Url]
    public $sortBy = 'name';
    
    #[Url]
    public $sortDir = 'asc';

    public function sort($column)
    {
        if ($this->sortBy === $column) {
            $this->sortDir = $this->sortDir === 'asc' ? 'desc' : 'asc';
        } else {
            $this->sortBy = $column;
            $this->sortDir = 'asc';
        }
    }
}

Query

php
#[Computed]
public function users()
{
    return User::query()
        ->when($this->search, fn($q) => $q->where('name', 'like', "%{$this->search}%"))
        ->orderBy($this->sortBy, $this->sortDir)
        ->paginate(10);
}
All articles

Keep reading

  • Laravel Action Classes Pattern16 January 20261 min read
  • Laravel Action Classes: Single Responsibility16 January 20261 min read
  • Laravel API Rate Limiting16 January 20261 min read