Bulk Action using Livewire

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 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="" />

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=""
     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.

<input type="checkbox" value=""
     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 which automatically generates all the Code related to Bulk Actions.