F
Filament•5mo ago
Asmit

Custom Action on custom column.

Hello everyone, Is there any way to add custom action on custom column: 
use Filament\Tables\Actions\Action;
use Filament\Tables\Columns\Column;

class CustomColumn extends Column
{
     public function getCustomAction(): ?Action
    {
       return Action::make('customAction')
           ->form([
               TextColumn::make('name')
           ]);
    }
}
use Filament\Tables\Actions\Action;
use Filament\Tables\Columns\Column;

class CustomColumn extends Column
{
     public function getCustomAction(): ?Action
    {
       return Action::make('customAction')
           ->form([
               TextColumn::make('name')
           ]);
    }
}
<div>
   {{ $getState() }}
   {{ $getCustomAction() }}
</div>
<div>
   {{ $getState() }}
   {{ $getCustomAction() }}
</div>
It shows the button but not trigger the modal why ?
15 Replies
Asmit
AsmitOP•5mo ago
Any Idea ?
LeandroFerreira
LeandroFerreira•5mo ago
why not just use an Action?
Asmit
AsmitOP•5mo ago
Hey @LeandroFerreira, thanks for the reply! My use case is: I have a column, and if there's no value in it, I want to show a + icon. When the user clicks that icon, a modal should open. Do you have any suggestions on how I can achieve this? Thanks again
LeandroFerreira
LeandroFerreira•5mo ago
Asmit
AsmitOP•5mo ago
Thanks @LeandroFerreira! I’ll give this a try and let you know how it goes. Appreciate the help! Hi @LeandroFerreira I tried implementing a custom action on my IconActionColumn, but I’m a bit stuck on how to pass the action to a Livewire component. Here’s what I have: 
IconActionColumn::make('name')
                ->label('name')
                ->sortable()
                ->customAction(
                    Action::make('Set')
                        ->action(fn() => dd('hello'))
                ),
IconActionColumn::make('name')
                ->label('name')
                ->sortable()
                ->customAction(
                    Action::make('Set')
                        ->action(fn() => dd('hello'))
                ),
class IconActionColumn extends Column
{
    protected string $view = 'tables.columns.icon-action-column';
    protected mixed $customAction = null;
    public function customAction(mixed $action): static
    {
        $this->customAction = $action;
        return $this;
    }
    public function getCustomAction(): mixed
    {
        return $this->customAction;
    }
}
class IconActionColumn extends Column
{
    protected string $view = 'tables.columns.icon-action-column';
    protected mixed $customAction = null;
    public function customAction(mixed $action): static
    {
        $this->customAction = $action;
        return $this;
    }
    public function getCustomAction(): mixed
    {
        return $this->customAction;
    }
}
Livewire 
@php
$action = $getCustomAction();
$record = $getRecord();
@endphp

<div>
        <livewire:action-column
            :action="$action"
            :record="$record"
        />
</div>
@php
$action = $getCustomAction();
$record = $getRecord();
@endphp

<div>
        <livewire:action-column
            :action="$action"
            :record="$record"
        />
</div>
Property type not supported in Livewire for property: [{}] How can I correctly pass the action to the Livewire component?
toeknee
toeknee•5mo ago
What is is you are trying to do? If you want an action just use: 
->action(Action::make('column_action')->action(fn() => dd('hello'))
->action(Action::make('column_action')->action(fn() => dd('hello'))
or if it's an action without model, what I use to download media from a record: 
 Tables\Columns\IconColumn::make('has_media')
                    ->getStateUsing(fn ($record) => ! empty($record->media->count()))
                    ->label('Letter Generated?')
                    ->alignCenter()
                    ->icons([
                        'heroicon-o-x-circle',
                        'heroicon-o-check-circle' => fn ($state, $record): bool => ! empty($record->media->count()),
                    ])
                    ->colors([
                        'danger',
                        'success' => fn ($state, $record): bool => ! empty($record->media->count()),
                    ])
                    ->action(function ($record) {

                      dd($record);

                    }),
 Tables\Columns\IconColumn::make('has_media')
                    ->getStateUsing(fn ($record) => ! empty($record->media->count()))
                    ->label('Letter Generated?')
                    ->alignCenter()
                    ->icons([
                        'heroicon-o-x-circle',
                        'heroicon-o-check-circle' => fn ($state, $record): bool => ! empty($record->media->count()),
                    ])
                    ->colors([
                        'danger',
                        'success' => fn ($state, $record): bool => ! empty($record->media->count()),
                    ])
                    ->action(function ($record) {

                      dd($record);

                    }),
Asmit
AsmitOP•5mo ago
@toeknee Thank you for the reply! Actually, what I’m trying to do is this, If a column has no data, I want to display an icon as an empty state. When the user clicks that icon, it should open a modal to input and save some data. After saving, if the user wants, they should also be able to add more of these “empty” actions.
toeknee
toeknee•5mo ago
Yeah that's easy enough with the default icon action like? 
                IconColumn::make('name')
                    ->alignCenter()
                    ->label(new HtmlString('Name'))
                    ->sortable()
                    ->icons([
                        'heroicon-o-x-circle',
                        'heroicon-o-check-circle' => fn ($state, $record): bool => ! empty($record->name),
                    ])
                    ->action(Tables\Actions\Action::make('name_action')
                        ->fillForm(fn ($record) => $record->toArray())
                        ->form([
                            TextInput::make('name'),
                        ])
                    ),
                IconColumn::make('name')
                    ->alignCenter()
                    ->label(new HtmlString('Name'))
                    ->sortable()
                    ->icons([
                        'heroicon-o-x-circle',
                        'heroicon-o-check-circle' => fn ($state, $record): bool => ! empty($record->name),
                    ])
                    ->action(Tables\Actions\Action::make('name_action')
                        ->fillForm(fn ($record) => $record->toArray())
                        ->form([
                            TextInput::make('name'),
                        ])
                    ),
Asmit
AsmitOP•5mo ago
Thanks @toeknee I think this will work for now. One more thing, can you suggest me how can we pass the Action as parameter on livewire
toeknee
toeknee•5mo ago
You would pass it as normal, if it's defined on the livewire component you just render it as normal.
Asmit
AsmitOP•5mo ago
While try to pass as normal, Property type not supported in Livewire for property: [{}]
toeknee
toeknee•5mo ago
You are probably passing the action object... which you can't pass like that. The action should be defined on the component you are passing too, just set a value to trigger it rendering.
Asmit
AsmitOP•5mo ago
You are right I passed the action object, you mean I have to register action on my Listpage and then call it from my custom livewire component.
toeknee
toeknee•5mo ago
No the action should be registered on your cusotm livewire component? Then you trigger it with the method
Asmit
AsmitOP•5mo ago

Did you find this page helpful?