❗ Alpine.js not working inside PowerGrid, but works fine in other Blade views

[nguyenhoang24695]

Livewire PowerGrid version

6.3.1

Livewire version

3.6.3

Laravel version

12.9.2

Which PHP version are you using?

PHP 8.4

Which Theme are you using?

Tailwind

Have you published the resource files and customized them? (php artisan vendor:publish)

Yes

What is the problem?

I'm currently using Alpine.js across my Laravel project. In regular Blade views (outside of PowerGrid components), Alpine directives like x-data, x-show, and x-on:click work perfectly.

However, when I try to use Alpine.js inside a PowerGrid table component, none of the Alpine functionality works. It's as if Alpine is not initializing or being recognized inside the PowerGrid-rendered area.

Code snippets

public function actions(VisaApplication $row): array
{
// Class name of the model to pass to the delete modal
$className = VisaApplication::class;

    // Render the action-dropdown component
    return [
        Button::add('dropdown')
            ->slot(Blade::render(
                '<x-visa-application.action-dropdown
                    :row-id="$rowId"
                    :class="$class"
                    :name="$name"
                    :show-edit="$showEdit"
                    :show-delete="$showDelete"
                    :extra-items="$extraItems"
                />',
                [
                    'rowId' => $row->id,
                    'class' => $className,
                    'name' => $row->name,
                    'showEdit' => auth()->user()->isAbleTo(PermissionEnum::UPDATE_VISA_APPLICATION->value),
                    'showDelete' => false,
                    'extraItems' => [
                        [
                            'label' => 'Bỏ gắn tag',
                            'action' => '$dispatch(\'remove-tag\', { id: '.$row->id.' })',
                        ],
                    ],
                ]
            )),
    ];
}

////Blade

⋮

    <!-- Menu dropdown -->
    <div
            x-show="ccopen"
            @click.away="ccopen = false"
            x-transition
            class="absolute z-20 mt-2 w-52 bg-white border border-gray-200 rounded-md shadow-lg"
    >
        @if ($showEdit)
            <a href="#" class="block px-4 py-2 hover:bg-gray-100 text-sm">Sửa</a>
        @endif

        @if ($showDelete)
            <a href="#" class="block px-4 py-2 hover:bg-gray-100 text-sm text-red-500">Xoá</a>
        @endif

        @foreach($extraItems as $item)
            <button
                    type="button"
                    x-on:click="{!! $item['action'] !!}"
                    class="block w-full text-left px-4 py-2 hover:bg-gray-100 text-sm"
            >
                {{ $item['label'] }}
            </button>
        @endforeach
    </div>
</div>

How do you expect it to work?

Alpine.js should be initialized properly inside PowerGrid-rendered HTML so we can use reactive behaviors within buttons, modals, dropdowns, etc. inside PowerGrid rows or headers.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be removed if I haven't met the criteria above.