In this Tutorial, we will see how to implement Filter on a Table using Livewire. This is the part 4 of the Series related to adding New Functionality to a Table using Livewire. In Last Part of the Series we saw how to implement Bulk Action using Livewire.
Let us assume we have a Model called as Product
and it has a column status
which represents whether the Product is active or not. And we want to give User the ability so that they can Filter the Products using status
.
I would assume that you already have a working Livewire Component which is showing the Records in a Table Form. First of all we are going to create a Dropdown in View which would allow User to Filter the Records.
<div>
<label>
Status
</label>
<select>
<option value="">Any</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
The Dropdown has 3 Values. Any, Yes and No. When User selects Any, all Products will be displayed. When User selects Yes, only those Products which have status
of 1 should display. And when the User selects No, Products with status
of 0 will display.
Next we will create a property called $selectedStatus
and link it with above dropdown using wire:model
.
public $selectedStatus = '';
<select wire:model="selectedStatus">
<option value="">Any</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
This way whenever User changes the above Dropdown, the property $selectedStatus
would be updated in the Component and Livewire will re-render the component. Now all we need to do is to change the Query so that User Selection is honoured.
Below is the current Query that we have.
public function query()
{
return Product::query();
}
We will change this using when
Condition like below
public function query()
{
return Product::query()
->when($this->selectedStatus, function($query) {
return $query->where('status', $this->selectedStatus);
});
}
Since we are using when
clause, the query with where clause on status
column will only be added when User selects Yes or No. So if the User selects Any
which is equivalent to empty, then the query with where Clause will not be added.
This is all that we need to filter the Records using Livewire. Here we filtered the Records using the column from the current table. In the next post we will see how to filter the Records using Belongs To Relation.
If you have liked this Tutorial, please checkout the Livewire Package tall-crud-generator which automatically generates all the Code related to Filter on multiple columns.
Top comments (0)