Delete button

Hi everyone! I'm new to FilamentPHP and I'm trying to add custom "Edit" and "Delete" buttons to my table. The "Edit" button works perfectly, but the "Delete" button isn't functioning. I'm using the default mountTableAction('delete', '{$record->id}') method for the delete functionality.

Here’s the code for my custom delete button:

$deleteButton = <<<HTML
<button
    type="button"
    wire:click="mountTableAction('delete', '{$record->id}')"
    wire:loading.attr="disabled"
    class="fi-btn relative font-semibold inline-grid items-center gap-1 px-2.5 py-1.5 text-sm rounded-lg
           ring-1 ring-custom-600 text-custom-600 hover:bg-custom-400/10
           dark:text-custom-400 dark:ring-custom-500"
    style="--c-400:var(--danger-400); --c-500:var(--danger-500); --c-600:var(--danger-600);"
>
    <!-- Delete icon -->
    <svg wire:loading.remove.delay.default="1" wire:target="mountTableAction('delete', '{$record->id}')"
         class="w-4 h-4" fill="currentColor">
        <path d="M8.75 1A2.75..."/>
    </svg>
    <!-- Loading spinner -->
    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"
         wire:loading.delay.default=""
         wire:target="mountTableAction('delete', '{$record->id}')">
        <path ... />
    </svg>
    <span class="fi-btn-label">削除</span>
</button>
HTML;

$deleteButton = <<<HTML
<button
    type="button"
    wire:click="mountTableAction('delete', '{$record->id}')"
    wire:loading.attr="disabled"
    class="fi-btn relative font-semibold inline-grid items-center gap-1 px-2.5 py-1.5 text-sm rounded-lg
           ring-1 ring-custom-600 text-custom-600 hover:bg-custom-400/10
           dark:text-custom-400 dark:ring-custom-500"
    style="--c-400:var(--danger-400); --c-500:var(--danger-500); --c-600:var(--danger-600);"
>
    <!-- Delete icon -->
    <svg wire:loading.remove.delay.default="1" wire:target="mountTableAction('delete', '{$record->id}')"
         class="w-4 h-4" fill="currentColor">
        <path d="M8.75 1A2.75..."/>
    </svg>
    <!-- Loading spinner -->
    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"
         wire:loading.delay.default=""
         wire:target="mountTableAction('delete', '{$record->id}')">
        <path ... />
    </svg>
    <span class="fi-btn-label">削除</span>
</button>
HTML;

I also added this button to a mobile-only section:

$mobileActions = <<<HTML
<div class="flex items-center block gap-3 mt-4 md:hidden">
    {$editButton}
    {$deleteButton}
</div>
HTML;

$mobileActions = <<<HTML
<div class="flex items-center block gap-3 mt-4 md:hidden">
    {$editButton}
    {$deleteButton}
</div>
HTML;

The "Edit" button works fine, but when I click the "Delete" button, nothing happens. I suspect there might be an issue with the wire:click directive or permissions, but I'm not sure.

Could someone please help me figure out why the "Delete" button isn't working? Any advice would be greatly appreciated!

Delete button

$deleteButton = <<<HTML
<button
    type="button"
    wire:click="mountTableAction('delete', '{$record->id}')"
    wire:loading.attr="disabled"
    class="fi-btn relative font-semibold inline-grid items-center gap-1 px-2.5 py-1.5 text-sm rounded-lg
           ring-1 ring-custom-600 text-custom-600 hover:bg-custom-400/10
           dark:text-custom-400 dark:ring-custom-500"
    style="--c-400:var(--danger-400); --c-500:var(--danger-500); --c-600:var(--danger-600);"
>
    <!-- Delete icon -->
    <svg wire:loading.remove.delay.default="1" wire:target="mountTableAction('delete', '{$record->id}')"
         class="w-4 h-4" fill="currentColor">
        <path d="M8.75 1A2.75..."/>
    </svg>
    <!-- Loading spinner -->
    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"
         wire:loading.delay.default=""
         wire:target="mountTableAction('delete', '{$record->id}')">
        <path ... />
    </svg>
    <span class="fi-btn-label">削除</span>
</button>
HTML;

$deleteButton = <<<HTML
<button
    type="button"
    wire:click="mountTableAction('delete', '{$record->id}')"
    wire:loading.attr="disabled"
    class="fi-btn relative font-semibold inline-grid items-center gap-1 px-2.5 py-1.5 text-sm rounded-lg
           ring-1 ring-custom-600 text-custom-600 hover:bg-custom-400/10
           dark:text-custom-400 dark:ring-custom-500"
    style="--c-400:var(--danger-400); --c-500:var(--danger-500); --c-600:var(--danger-600);"
>
    <!-- Delete icon -->
    <svg wire:loading.remove.delay.default="1" wire:target="mountTableAction('delete', '{$record->id}')"
         class="w-4 h-4" fill="currentColor">
        <path d="M8.75 1A2.75..."/>
    </svg>
    <!-- Loading spinner -->
    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"
         wire:loading.delay.default=""
         wire:target="mountTableAction('delete', '{$record->id}')">
        <path ... />
    </svg>
    <span class="fi-btn-label">削除</span>
</button>
HTML;

I also added this button to a mobile-only section:

$mobileActions = <<<HTML
<div class="flex items-center block gap-3 mt-4 md:hidden">
    {$editButton}
    {$deleteButton}
</div>
HTML;

$mobileActions = <<<HTML
<div class="flex items-center block gap-3 mt-4 md:hidden">
    {$editButton}
    {$deleteButton}
</div>
HTML;

Delete button

Delete button

Similar Threads

Similar Threads

Similar Threads