Filament•2y ago

How to properly hide / show headerAction dynamically ?

as shown in the video, the header action should be hidden on mount but it didnt and it also render three dots menu when the button is hidden. it work as intended when i replace the hidden method to be extraAttribute ( alpine x-show ) below is the code :

class Testing extends Component implements HasTable
{
    use InteractsWithTable;

    public $showHeaderActionsButton = false;

    protected function getTableQuery(): Builder|Relation
    {
        return PromoHeader::query();
    }

    protected function getTableHeaderActions(): array
    {
        return [
            Action::make('testing')
                ->label('Test')
                ->button()
                ->action(fn () => dd('hello'))
                // ->extraAttributes([
                //     'x-show' => '! $wire.showHeaderActionsButton'
                // ])
                ->hidden($this->showHeaderActionsButton)
        ];
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('id'),
            TextColumn::make('updated_at'),
        ];
    }
}

class Testing extends Component implements HasTable
{
    use InteractsWithTable;

    public $showHeaderActionsButton = false;

    protected function getTableQuery(): Builder|Relation
    {
        return PromoHeader::query();
    }

    protected function getTableHeaderActions(): array
    {
        return [
            Action::make('testing')
                ->label('Test')
                ->button()
                ->action(fn () => dd('hello'))
                // ->extraAttributes([
                //     'x-show' => '! $wire.showHeaderActionsButton'
                // ])
                ->hidden($this->showHeaderActionsButton)
        ];
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('id'),
            TextColumn::make('updated_at'),
        ];
    }
}

5 Replies

Filament•2y ago

Please read the #✅┊rules about how to format your code properly.

toeknee•2y ago

hidden is $this->showHeaderActionsButton = false, hidden(false) means it will show.. you will need to update it accordingly to invert what you want: $hideHeaderActionsButton = true; hidden($this->hideHeaderActionsButton)

WrkLOP•2y ago

ah, i mixed up with visible but here is my another test

WrkLOP•2y ago

<div class="p-5">
    <x-filament::button wire:click="toggle" class="text-right">
        Show / Hide Header Action
    </x-filament::button>

    <div class="mt-4">
        Header Action : {{ $showHeaderActionsButton ? 'Hidden (true)' : 'Hidden (false)' }}
    </div>

    <div class="mt-4">
        {{ $this->table }}
    </div>
</div>

<div class="p-5">
    <x-filament::button wire:click="toggle" class="text-right">
        Show / Hide Header Action
    </x-filament::button>

    <div class="mt-4">
        Header Action : {{ $showHeaderActionsButton ? 'Hidden (true)' : 'Hidden (false)' }}
    </div>

    <div class="mt-4">
        {{ $this->table }}
    </div>
</div>

WrkLOP•2y ago

this is my blade view

Gaming

Programming

How to properly hide / show headerAction dynamically ?