Filament•5mo ago

Table actions / alpine / livewire UI

Hi, I've got a table that has accept and reject actions on each row. What I'd like to do is only show the actions on the first row UNTIL an action has been clicked. If accept or reject is clicked, then the actions for the 2nd row should appear and so on. It might be worth adding that my table is in a custom component in a modal. I'm struggling to know where to start with this. Usually, (without using a front end framework) I'd just assign some classes to the table and actions and hide / show based on interactions quite simply. I'm new to livewire / alpine but have been using filament for a few months. Just watched an alpine series on Laracast but that doesn't show integration with Filament obviously. I added x-data to my component wrapper in the hope that I'd be able to hook in to the table there but I can't seem to hook into the table. Any pointers in the right direction would be great.

9 Replies

toeknee•5mo ago

Really you need to relationship the rows, and order so if parent record is approved, show accept/reject.

Adam HolmesOP•5mo ago

I'm not sure I follow. Are you saying that each row should have a parent and the first row is the root? This table could potentially have 30+ rows in it. Are you suggesting that by doing this, I could just use the visible() method on the action rather than trying to look at table rows in javascript?

toeknee•5mo ago

Yep I am, or you return based on the order, but if it's handled in the relationahship, and you run $record->previousComplete which would check if the record before this record is complete.

Adam HolmesOP•5mo ago

So say I have a Company model and this popup is to choose a new company name based on another model called CompanyName - the intention is to save the company_name_id on the Company. I'm not sure how I could set up a relationship for all the CompanyName models so that they have parents. Not a great example, but I'm trying not to have to fill you with domain knowledge Current table in component looks like this:

public function table(Table $table): Table
{
    return $table
        ->query(CompanyName::query()
        )
        ->columns([
            TextColumn::make('name'),
        ])
        ->actions([
            Tables\Actions\Action::make('accept')
                ->color('success')
                ->button()
                ->requiresConfirmation()
                ->action(fn (CompanyName $record) => $this->assignCompanyName($record)),
            Tables\Actions\Action::make('reject')
                ->color('danger')
                ->button()
                ->action(fn (CompanyName $record) => $this->rejectCompanyName($record)),
        ])
        ->paginated(false);
}

public function table(Table $table): Table
{
    return $table
        ->query(CompanyName::query()
        )
        ->columns([
            TextColumn::make('name'),
        ])
        ->actions([
            Tables\Actions\Action::make('accept')
                ->color('success')
                ->button()
                ->requiresConfirmation()
                ->action(fn (CompanyName $record) => $this->assignCompanyName($record)),
            Tables\Actions\Action::make('reject')
                ->color('danger')
                ->button()
                ->action(fn (CompanyName $record) => $this->rejectCompanyName($record)),
        ])
        ->paginated(false);
}

toeknee•5mo ago

Ok so you are not using a table builder then? But just do a first where accept = 0, then in filament visible

Adam HolmesOP•5mo ago

Yeah I am using table builder - it's just in a component so I can use it in a modal So I guess when I load the modal I'll need to add all displayed options into a relationship table, use that to detect if any have been accepted or rejected and then when one is accepted, clear the relationship table. Because in theory I could have the first row reject, and then accept the second and then have to ignore the third It just seems overly complicated for what would have been pretty simple if I manually created the table and then interacted with jquery for example

toeknee•5mo ago

You could still use JS... just put a listener on the table and hide them on load or add a js hidden class, there's lots of ways to do it

Adam HolmesOP•5mo ago

I don't suppose you have any resources you could point me towards for that? I did try to do this, but I couldn't work out what to target on the filament tables for the query selector

toeknee•5mo ago

->extraAttributes([]) and use anything you like for example 'class' => 'approval_checker' on the table or the columns

Gaming

Programming

Table actions / alpine / livewire UI