Applying Filter to Table using Livewire

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.