Filament•20h ago

add action to group header table

im trying to add delete action button to group header at table but its not working, it only do quick spin and then back to normal state. what i do to render the action button is make function in ListRecord

    public function renderGroupDeleteAction($id)
    {
        return Actions\Action::make('delete')
            ->requiresConfirmation()
            ->record(Category::find($id))
            ->action(function ($record) {
                \Log::info('test ' . $record->id);
                if($record->delete()) {
                    Notification::make()
                        ->title('Delete record ' . $record->id . ' successfully')
                        ->success()
                        ->send();
                }
            })
            ->icon("heroicon-m-trash")
            ->iconButton()
            ->color('danger')
            ->render();
    }

    public function renderGroupDeleteAction($id)
    {
        return Actions\Action::make('delete')
            ->requiresConfirmation()
            ->record(Category::find($id))
            ->action(function ($record) {
                \Log::info('test ' . $record->id);
                if($record->delete()) {
                    Notification::make()
                        ->title('Delete record ' . $record->id . ' successfully')
                        ->success()
                        ->send();
                }
            })
            ->icon("heroicon-m-trash")
            ->iconButton()
            ->color('danger')
            ->render();
    }

and use it on group\header.blade

  {!! $this->renderGroupDeleteAction($id) !!}

  {!! $this->renderGroupDeleteAction($id) !!}

did i use it wrong ?

Solution:

Check this: https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component

Adding an action to a Livewire component - Actions - Filament

Jump to solution

9 Replies

Dennis Koch•10h ago

Please consult the docs on standalone actions: The name of the action must match the method name

kirakatouOP•8h ago

i did try to use DeleteAction too but its the same only quick loading spin heres my DeleteAction

  return DeleteAction::make()
              ->requiresConfirmation()
              ->record(Category::find($id))
              ->successNotificationTitle('Category deleted')
              ->icon("heroicon-m-trash")
              ->iconButton()
              ->color('danger')
              ->render();

  return DeleteAction::make()
              ->requiresConfirmation()
              ->record(Category::find($id))
              ->successNotificationTitle('Category deleted')
              ->icon("heroicon-m-trash")
              ->iconButton()
              ->color('danger')
              ->render();

Dennis Koch•8h ago

Why do you use ->render()?

i did try to use DeleteAction too but its the same only quick loading spin

Can you show the full code?

kirakatouOP•8h ago

cause im trying to use it on resources/views/vendor/filament-tables/components/group/header.blade.php

@props([
    'collapsible' => false,
    'description' => null,
    'label' => null,
    'start' => null,
    'title',
])

@php
    $id = null;
    $key = $title;
    if (isset($this->hasGroupEditButton) && $this->hasGroupEditButton) {
        [$title, $id] = explode(' - ', $title);
    }
@endphp

<div
    {{
        $attributes->class([
            'fi-ta-group-header flex w-full items-center gap-x-3 bg-gray-50 px-3 py-2 dark:bg-white/5',
            'cursor-pointer' => $collapsible,
        ])
    }}
>
    {{ $start }}

    <div class="grid">
        <h4 class="text-sm font-medium text-gray-950 dark:text-white">
            @if (filled($label) && $label !== 'Category')
                {{ $label }}:
            @endif

            {{ $title }}
        </h4>

        @if (filled($description))
            <p class="text-sm text-gray-500 dark:text-gray-400">
                {{ $description }}
            </p>
        @endif
    </div>

    @if (isset($this->hasGroupEditButton) && $this->hasGroupEditButton)
        @if(method_exists($this, 'renderGroupDeleteAction'))
            <div class="">
                {!! $this->renderGroupDeleteAction($id) !!}
            </div>
        @endif
    @endif

    @if ($collapsible)
        <div x-on:click="toggleCollapseGroup(@js($key))">
            <x-filament::icon-button
                color="gray"
                icon="heroicon-m-chevron-up"
                icon-alias="tables::grouping.collapse-button"
                :label="filled($label) ? ($label . ': ' . $title) : $title"
                size="sm"
                :x-bind:aria-expanded="'! isGroupCollapsed(' . \Illuminate\Support\Js::from($title) . ')'"
                :x-bind:class="'isGroupCollapsed(' . \Illuminate\Support\Js::from($title) . ') && \'-rotate-180\''"
            />
        </div>
    @endif
</div>

@props([
    'collapsible' => false,
    'description' => null,
    'label' => null,
    'start' => null,
    'title',
])

@php
    $id = null;
    $key = $title;
    if (isset($this->hasGroupEditButton) && $this->hasGroupEditButton) {
        [$title, $id] = explode(' - ', $title);
    }
@endphp

<div
    {{
        $attributes->class([
            'fi-ta-group-header flex w-full items-center gap-x-3 bg-gray-50 px-3 py-2 dark:bg-white/5',
            'cursor-pointer' => $collapsible,
        ])
    }}
>
    {{ $start }}

    <div class="grid">
        <h4 class="text-sm font-medium text-gray-950 dark:text-white">
            @if (filled($label) && $label !== 'Category')
                {{ $label }}:
            @endif

            {{ $title }}
        </h4>

        @if (filled($description))
            <p class="text-sm text-gray-500 dark:text-gray-400">
                {{ $description }}
            </p>
        @endif
    </div>

    @if (isset($this->hasGroupEditButton) && $this->hasGroupEditButton)
        @if(method_exists($this, 'renderGroupDeleteAction'))
            <div class="">
                {!! $this->renderGroupDeleteAction($id) !!}
            </div>
        @endif
    @endif

    @if ($collapsible)
        <div x-on:click="toggleCollapseGroup(@js($key))">
            <x-filament::icon-button
                color="gray"
                icon="heroicon-m-chevron-up"
                icon-alias="tables::grouping.collapse-button"
                :label="filled($label) ? ($label . ': ' . $title) : $title"
                size="sm"
                :x-bind:aria-expanded="'! isGroupCollapsed(' . \Illuminate\Support\Js::from($title) . ')'"
                :x-bind:class="'isGroupCollapsed(' . \Illuminate\Support\Js::from($title) . ') && \'-rotate-180\''"
            />
        </div>
    @endif
</div>

Dennis Koch•8h ago

Okay, again: renderGroupDeleteAction() is not the right name for that method.

kirakatouOP•8h ago

class ListSubcategories extends ListRecords
{
    protected static string $resource = SubcategoryResource::class;

    public bool $hasGroupEditButton = true;

    protected function getHeaderActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }

    protected function configureCreateAction(Tables\Actions\CreateAction|CreateAction $action): void
    {
        $action->modelLabel('category');
        $action->url(fn (): string => CategoryResource::getUrl('create'));
    }

    public function renderGroupEditAction($id)
    {
        return Actions\Action::make('edit')
            ->icon("heroicon-m-pencil")
            ->iconButton()
            ->url(fn (): string => route('filament.admin.master.resources.categories.edit', ['record' => $id]))
            ->render();
    }

    public function renderGroupDeleteAction($id)
    {
        return DeleteAction::make()
            ->requiresConfirmation()
            ->record(Category::find($id))
            ->successNotificationTitle('Category deleted')
            ->icon("heroicon-m-trash")
            ->iconButton()
            ->color('danger')
            ->render();
    }
}

class ListSubcategories extends ListRecords
{
    protected static string $resource = SubcategoryResource::class;

    public bool $hasGroupEditButton = true;

    protected function getHeaderActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }

    protected function configureCreateAction(Tables\Actions\CreateAction|CreateAction $action): void
    {
        $action->modelLabel('category');
        $action->url(fn (): string => CategoryResource::getUrl('create'));
    }

    public function renderGroupEditAction($id)
    {
        return Actions\Action::make('edit')
            ->icon("heroicon-m-pencil")
            ->iconButton()
            ->url(fn (): string => route('filament.admin.master.resources.categories.edit', ['record' => $id]))
            ->render();
    }

    public function renderGroupDeleteAction($id)
    {
        return DeleteAction::make()
            ->requiresConfirmation()
            ->record(Category::find($id))
            ->successNotificationTitle('Category deleted')
            ->icon("heroicon-m-trash")
            ->iconButton()
            ->color('danger')
            ->render();
    }
}

Solution

Dennis Koch•8h ago

Check this: https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component

Adding an action to a Livewire component - Actions - Filament

Dennis Koch•8h ago

Important for you is: https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component#adding-the-action and https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component#passing-action-arguments

Adding an action to a Livewire component - Actions - Filament

kirakatouOP•8h ago

ohhh its working now, thanks dennis!

Gaming

Programming

add action to group header table

Did you find this page helpful?