Bulk Actions โ
This section covers the Bulk Action feature.
Here you will find:
Introduction โ
PowerGrid offers a convenient perform multi-row actions by displaying a Button in your Table Component Header and Checkboxes in each Table row.
Currently, this feature is only available on the Tailwind theme.
Display the Bulk Button โ
To implement Bulk Actions in PowerGrid, you must add a Button inside the header()
method of your Table Component.
Typically, a Bulk Button will dispatch an event that can be handled by your component.
The next example displays a button at the Table header which will dispatch the bulkDelete
concatenated with the Table name.
// app/Livewire/DishTable.php
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Button;
class DishTable extends PowerGridComponent
{
public function header(): array
{
return [
Button::add('bulk-delete')
->slot('Bulk Delete')
->dispatch('bulkDelete.' . $this->tableName, []),
];
}
}
๐ See it in action
See an interactive example using Bulk Actions in PowerGrid.
Handling the Bulk Event โ
You may handle the event using the #[On] Livewire Attribute.
The selected item's IDs will be available in the global pgBulkActions
JavaScript component:
window.pgBulkActions.get('name-of-your-table');
The example below will simply display an alert containing the row IDs.
// app/Livewire/DishTable.php
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use Livewire\Attributes\On;
class DishTable extends PowerGridComponent
{
#[On('bulkDelete.{tableName}')]
public function bulkDelete(): void
{
$this->js('alert(window.pgBulkActions.get(\'' . $this->tableName . '\'))');
if($this->checkboxValues){
YouModel::destroy($this->checkboxValues);
$this->js('window.pgBulkActions.clearAll()'); // clear the count on the interface.
}
}
}
Show Select Items Count โ
The selected items count is available in the global pgBulkActions
JavaScript component, in the count
property:
window.pgBulkActions.count('detail');
To display the selected items count in the button, you must add a slot()
, using the Alpine x-text directive to display the count.
Example:
public function header(): array
{
return [
Button::add('bulk-delete')
->slot('Bulk Delete')
->slot(__('Bulk delete (<span x-text="window.pgBulkActions.count(\'' . $this->tableName . '\')"></span>)'))
->class('cursor-pointer block bg-white-200 text-gray-700 ')
->dispatch('bulkDelete-' . $this->tableName, []),
];
}