Skip to content

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.

php
// 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:

javascript
window.pgBulkActions.get('name-of-your-table');

The example below will simply display an alert containing the row IDs.

php
// 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:

javascript
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:

php
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, []),
     ];
 }

Created By Luan Freitas and @DanSysAnalyst