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. 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="{{$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.
<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 which automatically generates all the Code related to Bulk Actions.