Bulk Action using Livewire
Tags: laravel, livewire
Published: 2021-09-22 11:11:00

In this Tutorial, we will see how to implement Bulk Action so that User can select and update multiple records using Livewire. This is the part 3 of the Series related to Livewire Table. In [Part 2](https://dev.to/100r0bh/hide-show-columns-in-livewire-table-1fgb) of the Series we saw how to Hide/Show Columns in a Table using Livewire.

Let us assume we have a Model called as `Product` and it has a column `status`. We want to give user the ability to select multiple products and then change the value of `status` column for all of the selected products.

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 add a New Property `$selectedProducts` to our Livewire Component.  This would hold all the Products that user has selected. 

```
public $selectedProducts = [];
```

Now in the View, we would like to display a checkbox next to each item. We would create a New column and we will paste the following code inside the loop which displays all the Results.

```
<input type="checkbox" value="{{$product->id}}" />
```

This would display the checkbox and we have given it the value which is the Primary Key of the Product Table so as to uniquely identify it.

Now we would link this checkbox to the `$selectedProducts` using the `wire:model`.

```
<input type="checkbox" value="{{$product->id}}"
     wire:model="selectedProducts" />
``` 

Now every time a User selects a Product, `$selectedProducts` would be updated. So at any time `$selectedProducts` would have all the Products that User has selected for Bulk Action.

Infact, we are going to use `wire:model.defer`. The `defer` directives makes sure that our Component will not be re-rendered when the User checks the checkbox. This will result in a significant performance improvement. If you want to learn more about defer and other techniques to improve Performance using Livewire, you can check this [Article](https://dev.to/100r0bh/3-tips-to-improve-livewire-performance-nnd).

```
<input type="checkbox" value="{{$product->id}}"
     wire:model.defer="selectedProducts" />
```

Now we need to create 2 Buttons, Activate and Deactivate. Both these buttons will call a method `changeStatus` on click. We will pass the value that we want to set for the status column as the parameter. So for Activate we pass 1 and for Deactivate we will pass 0.

```
<button wire:click="changeStatus(1)">Activate</button>
<button wire:click="changeStatus(0)">Deactivate</button>
```

Next we need to define this method within our Component. We can define it as follows. Here `$status` will hold the value that we want to set for the status column. So for Activate it will be 1 and for Deactivate it will be 0.

```
public function changeStatus($status)
{
}
```

Within this method we will first of all check, if there are any Records that User has selected using `$selectedProducts`. Then we will update the status column for all those Products. And then we will finally clear the `$selectedProducts` variable.

```
if (!empty($this->selectedProducts)) {
    Product::whereIn('id', $this->selectedProducts)->update(['status' => $status]);
    $this->selectedProducts = [];
}
```

And that is all we need to do to give User the Ability to update Records in Bulk.

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 Bulk Actions.