Applying Filter on a BelongsTo Column using Livewire
Tags: laravel, livewire
Published: 2021-09-30 13:56:20

In this Tutorial, we will see how to implement Filter on a belongsTo Column to a Table using Livewire. This is the part 5 of the Series related to adding New Functionality to a Table using Livewire. In [Last Part](https://dev.to/100r0bh/applying-filter-to-table-using-livewire-1n8j) of the Series we implemented Filter on the `status` column of the Product Model using Livewire.

Lets say our Product Model has `belongsTo` Relationship with Brand as follows

```
    public function brand()
    {
        return $this->belongsTo(Brand::class);
    }
```

That means our Product table has a column `brand_id`. And we want to Filter the Result using this column. This is very similar to the Filter that we applied on the `status` column in the last part. The only difference is that we would need to fetch the brands from the Brand table so that we can show them in the dropdown.

We would create a `brands` property and populate it in the mount method.

```
$this->brands = Brand::pluck('name', 'id')->toArray();
```

And in the View, we would create the dropdown by looping through the `brands`

```
<div>
    <label>
        Brand
    </label>
    <select>
        <option value="">Any</option>
        @foreach($brands as $brand_id => $brand_name)
        <option value="{{$brand_id}}">{{$brand_name}}</option>
        @endforeach
    </select>
</div>
```

The Dropdown will have all the Brands that User can select from. Moreover, we also have an `Any` option so as to display all the Products.

Next we will create a property called `$selectedBrand` and link it with above dropdown using `wire:model`.

```
public $selectedBrand = '';
```

```
<select wire:model="selectedBrand">
    <option value="">Any</option>
    @foreach($brands as $brand_id => $brand_name)
    <option value="{{$brand_id}}">{{$brand_name}}</option>
    @endforeach
</select>
```

This way whenever User changes the above Dropdown, the property `$selectedBrand` 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()
        ->when($this->selectedStatus, function($query) {
            return $query->where('status', $this->selectedStatus);
        });
}
```

We will include another `when` Condition like below:

```
public function query()
{
    return Product::query()
        ->when($this->selectedStatus, function($query) {
            return $query->where('status', $this->selectedStatus);
        })
        ->when($this->selectedBrand, function($query) {
            return $query->where('brand_id', $this->selectedBrand);
        });
}
```

Since we are using `when` clause, the query with where clause on `brand_id` column will only be added when User selects a particular Brand. So if the User selects `Any` which is equivalent to empty, then the query with where Clause on brand_id will not be added. 

This is all that we need to filter the Records using a BelongsTo column. If you have noticed this is very similar to the filter that we applied on the `status` column. In the next [post](https://dev.to/100r0bh/applying-filter-on-a-belongstomany-column-using-livewire-1i63) we will see how to filter the Records using BelongsToMany Relation.

If you have liked this Tutorial, please checkout the Livewire Package [tall-crud-generator](https://github.com/ascsoftw/tall-crud-generator) which automatically generates all the Code related to Filter on multiple columns.