Adding the user filtering/search

app/Livewire/Users/UserTable.php

@@ -17,6 +17,7 @@ class UserTable extends Component
 
     public $sortBy = 'name';
     public $sortDirection = 'asc';
+    public $nameFilter = '';
 
     public function render()
     {
@@ -26,20 +27,35 @@ public function render()
 
     public function sort($column) {
 
-       if ($this->sortBy === $column) {
+        if ($this->sortBy === $column) {
             $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
         } else {
             $this->sortBy = $column;
             $this->sortDirection = 'asc';
         }
     }
 
+    public function filterByName()
+    {
+        $this->resetPage();
+    }
+
+    public function resetFilter()
+    {
+        $this->nameFilter = '';
+        $this->resetPage();
+    }
+
     #[Computed]
     public function users()
     {
-        return User::orderBy($this->sortBy, $this->sortDirection)->paginate(5);
-            // simple pagination:
-            // return User::orderBy($this->sortBy, $this->sortDirection)->simplePaginate(5);
+        return User::query()
+            ->when($this->nameFilter !== '', function ($query) {
+                $query->where('name', 'like', '%' . $this->nameFilter . '%');
+            })
+            ->orderBy($this->sortBy, $this->sortDirection)
+            ->paginate(5);
     }
 
+
 }

resources/views/livewire/users/user-table.blade.php

@@ -10,6 +10,38 @@
         <x-layouts.section class="region padded-small">
             <h2>Users Table</h2>
 
+            <form wire:submit.prevent="filterByName">
+                <flux:field class="mb-4">
+                    <div class="flex items-center gap-2">
+                        <x-cds.input
+                            label="Filter by name"
+                            type="text"
+                            placeholder="Search users..."
+                            class="w-full"
+                            wire:model.defer="nameFilter"
+                        />
+                        <x-cds.button
+                            type="submit"
+                            variant="primary"
+                            size="sm"
+                            class="ml-2"
+                        >
+                            Filter
+                        </x-cds.button>
+                        <x-cds.button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            class="ml-2"
+                            wire:click="resetFilter"
+                            :disabled="$nameFilter === ''"
+                        >
+                            Reset
+                        </x-cds.button>
+                    </div>
+                </flux:field>
+            </form>
+
             <flux:table class="cds-table" :paginate="$this->users" >
 
                 <flux:table.columns>