F
Filament•2d ago
Akiyama

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!
No description
4 Replies
awcodes
awcodes•2d ago
What is custom about the delete action? Ie, what doesn’t the default delete action do that you need?
Akiyama
AkiyamaOP•2d ago
Thank you for asking! I’m not trying to change the functionality of the delete action itself. The default delete action works fine in terms of deleting the record. However, I wanted to customize the appearance and placement of the delete button to match my design requirements. Specifically: I added a custom-styled button with a unique class and icon. I also wanted the button to appear only on mobile devices, so I grouped it with the edit button in a mobile-only section. The issue is that while the custom edit button works as expected, the custom delete button doesn’t trigger the delete action when clicked. I suspect there might be an issue with how I’ve set up the wire:click directive or how the mountTableAction method is being called. I’m not trying to change the logic of the delete action itself—just its appearance and placement. Does that make sense?
awcodes
awcodes•2d ago
It makes sense, but in that case it sounds like a custom filament theme and css makes more sense.
Akiyama
AkiyamaOP•2d ago
Thank you for the suggestion! I didn’t think about using Filament’s theming or CSS to customize the button. That’s a much cleaner approach, and I’ll look into it. Really appreciate your help! 😊

Did you find this page helpful?