I have a Laravel 11 installation with Livewire 3 and I wanted to add PowerGrid latest to the stack. I am new for Livewire, I followed the instructions of the Livewire Powergrid documentation. I have created data table all stuff is working fine rendring, filter, pagination etc, But When try to impliment bulk action getting error Alpine Expression Error: window.pgBulkActions is undefined. Power grid store all ids in this global variable.

Alpine comes as default with Laravel LiveWire 3, so I did not need to install separately, so it is should not be a the cause of the error

I have made a component using this command :

php artisan powergrid:create

with auto Eloquent BComponentuilder, Auto-Discover Models and fillable property

This is the code of Component class OrderItemQuantityTable::

`

<?php

namespace AppLivewire;

use AppModelsDepartment;
use AppModelsOrderItemQuantity;
use IlluminateDatabaseEloquentBuilder;
use IlluminateSupportFacadesLang;
use PowerComponentsLivewirePowerGridButton;
use PowerComponentsLivewirePowerGridColumn;
use PowerComponentsLivewirePowerGridFacadesFilter;
use PowerComponentsLivewirePowerGridFooter;
use PowerComponentsLivewirePowerGridHeader;
use PowerComponentsLivewirePowerGridPowerGrid;
use PowerComponentsLivewirePowerGridPowerGridFields;
use PowerComponentsLivewirePowerGridPowerGridComponent;
use LivewireAttributesOn;

final class OrderItemQuantityTable extends PowerGridComponent
{
    public bool $showFilters = false;

    public bool $deferLoading = true;

    public string $tableName = 'order_item_quantities';

    public int $stage = 0;

    public function setUp(): array
    {
        $this->showCheckBox();

        return [
            Header::make()->showSearchInput(),
            Footer::make()
                ->showPerPage()
                ->showRecordCount(),
        ];
    }

    public function header(): array
    {
        return [
            Button::add('bulk-delete')
                ->slot('Bulk delete (<span x-text="window.pgBulkActions.count('' . $this->tableName . '')"></span>)')
                ->class('pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700 dark:ring-offset-pg-primary-800 dark:text-pg-primary-300 dark:bg-pg-primary-700')
                ->dispatch('bulkDelete.' . $this->tableName, []),
        ];
    }

    public function datasource(): Builder
    {
        return OrderItemQuantity::query()->with('department')
            ->when(
                $this->stage,
                fn ($builder) => $builder->whereHas(
                    'department',
                    fn ($builder) => $builder->where('stage', $this->stage)
                )
            );
    }

    public function relationSearch(): array
    {
        return [
            'department' => [
                'name',
            ],
        ];
    }

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
            ->add('id')
            ->add(OrderItemQuantity::MAGENTO_ORDER_ID)
            ->add(OrderItemQuantity::MAGENTO_ITEM_ID)
            ->add(OrderItemQuantity::SKU)
            ->add(OrderItemQuantity::QUANTITY, fn ($orderItemQuantity) => OrderItemQuantity::ITEM_QTY_VIEW_PREFIX.$orderItemQuantity->{OrderItemQuantity::QUANTITY})
            ->add(OrderItemQuantity::DEPARTMENT_ID, fn ($orderItemQuantity) => intval($orderItemQuantity->{OrderItemQuantity::DEPARTMENT_ID}))
            ->add('department_name', fn ($orderItemQuantity) => $orderItemQuantity->{OrderItemQuantity::DEPARTMENT_ID} ? $orderItemQuantity->department->{Department::NAME} : '')
            ->add(OrderItemQuantity::STATUS, fn ($orderItemQuantity) => $orderItemQuantity->{OrderItemQuantity::STATUS} ? OrderItemQuantity::PROCESSING_STAGE_STATUS_OPTION[$orderItemQuantity->{OrderItemQuantity::STATUS}] : '');
    }

    public function columns(): array
    {
        return [
            Column::make('Id', 'id')->sortable(),
            Column::make(Lang::get('common.magento_order_id'), OrderItemQuantity::MAGENTO_ORDER_ID)
                ->sortable()
                ->searchable(),

            Column::make(Lang::get('common.magento_item_id'), OrderItemQuantity::MAGENTO_ITEM_ID)
                ->sortable()
                ->searchable(),

            Column::make(Lang::get('common.sku'), OrderItemQuantity::SKU)
                ->sortable()
                ->searchable(),

            Column::make(Lang::get('common.quantity'), OrderItemQuantity::QUANTITY),

            Column::make(Lang::get('common.department'), 'department_name'),

            Column::make(Lang::get('common.status'), OrderItemQuantity::STATUS),

            Column::action(Lang::get('common.action'))
        ];
    }

    public function filters(): array
    {
        return [
            Filter::inputText(OrderItemQuantity::SKU)
                ->operators(['contains'])
                ->placeholder(Lang::get('common.sku')),

            Filter::inputText(OrderItemQuantity::MAGENTO_ORDER_ID)
                ->operators(['contains'])
                ->placeholder(Lang::get('common.magento_order_id')),

            Filter::inputText(OrderItemQuantity::MAGENTO_ITEM_ID)
                ->operators(['contains'])
                ->placeholder(Lang::get('common.magento_item_id')),

            Filter::select('department_name', OrderItemQuantity::DEPARTMENT_ID)
            ->dataSource(Department::all())
            ->optionLabel('name')
            ->optionValue('id'),

            Filter::select(OrderItemQuantity::STATUS, OrderItemQuantity::STATUS)
            ->dataSource(OrderItemQuantity::PROCESSING_STAGE_STATUS_OPTION_GRID)
            ->optionLabel('name')
            ->optionValue('id'),
        ];
    }

    #[On('edit')]
    public function edit($rowId): void
    {
        $this->js('alert('.$this->tableName.')');
    }

    public function actions(OrderItemQuantity $row): array
    {
        return [
            Button::add('edit')
                ->slot('Edit: '.$row->id)
                ->id()
                ->class('pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700 dark:ring-offset-pg-primary-800 dark:text-pg-primary-300 dark:bg-pg-primary-700')
                ->dispatch('edit', ['rowId' => $row->id])
        ];
    }

    #[On('bulkDelete.{tableName}')]
    public function bulkDelete(): void
    {
        $this->js('alert(window.pgBulkActions.get('' . $this->tableName . ''))');
    }

    /*
    public function actionRules($row): array
    {
    return [
            // Hide button edit for ID 1
            Rule::button('edit')
                ->when(fn($row) => $row->id === 1)
                ->hide(),
        ];
    }
    */
}

`

This is the error which I get in console ::

I tried to get as much info about this error as I could, but found none of valuable one.

Anyone, any idea?

Thank you!